mini-react-dom

A lightweight React-like DOM renderer with JSX, hooks, context, SSR, lazy loading, and minimal VDOM reconciliation.

✨ Features

• ⚛️ Virtual DOM and JSX support
• 🧠 useState, useEffect, useMemo, useCallback
• 🧩 createContext and useContext
• 🔄 Diffing & Reconciliation
• 🧵 Hydration for SSR
• 📦 lazy() and <Suspense> support
• 🎯 Minimal and easy to understand

📦 Installation

npm install mini-react-dom

🚀 Usage

/** @jsx createElement */
import {
  createElement,
  render,
  useState,
  useEffect,
  useMemo,
  useCallback,
  createContext,
  useContext,
  lazy,
  Suspense,
} from "mini-react-dom";

const ThemeContext = createContext("light");
const LazyComponent = lazy(() => import("./HeavyComponent.js"));

function App() {
  const [count, setCount] = useState(0);
  const theme = useContext(ThemeContext);
  const doubled = useMemo(() => count * 2, [count]);

  const handleClick = useCallback(() => console.log(count), [count]);

  useEffect(() => {
    console.log("Rendered or updated");
  }, [count]);

  return (
    <ThemeContext.Provider value="dark">
      <h1>Hello</h1>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={handleClick}>Log</button>

      <Suspense fallback={<p>Loading...</p>}>
        <LazyComponent />
      </Suspense>
    </ThemeContext.Provider>
  );
}

render(<App />, document.getElementById("root"));

🧪 Server-Side Rendering (SSR)

import { createElement } from "mini-react-dom";
import { renderToString } from "mini-react-dom";
import { App } from "./App.jsx";

const html = renderToString(<App />);

On the client:

import { hydrate } from "mini-react-dom";
hydrate(<App />, document.getElementById("root"));

📁 File Structure

src/
├── core/
│   ├── createElement.js
│   ├── render.js
│   ├── hooks.js
│   ├── context.js
│   ├── redux.js
│   ├── renderToString.js
│   ├── lazy.js
│   └── suspense.js
├── index.js

🛠 Dev

npm run dev      # Start Vite
npm run build    # Bundle for publishing

📜 License

MIT © Abuzcoder