Easy React

Easy React is a fully working, lightweight re-implementation of React's core ideas — including virtual DOM, function components, hooks, diffing, patching, context, memo, and reducers.

It preserves the fundamental mental model of React while keeping the code extremely small, readable, and ideal for learning or experimenting with framework design.

✨ Features

$3

- createElement() builder

- VElement + TextVNode

- Props diffing (including events)

- Children diffing (simplified)

$3

Supports:

- useState

- useEffect

- useRef

- useMemo

- useCallback

- useReducer

$3

- Components persist between renders

- Component.patch() intelligently reuses the previous instance

- Internal state, effects, and refs remain stable across updates

$3

- Effects run after DOM mount/update using queueMicrotask

- Dependency comparison and cleanup support

$3

- createContext

-

- useContext automatically subscribes/unsubscribes

$3

- Prevents rerendering via customizable props comparison

📦 Installation

Easy React is a single-file library.
Simply include it in your project:

``js
import React from '@whxcctv/easy-react';
const { createElement } = React;
`

If you use JSX:
`js
/* @jsx React.createElement /
`


🚀 Quick Start

`js
import React, { useState } from '@whxcctv/easy-react';

function Counter() {
const [count, setCount] = useState(0);

return (


document.body.appendChild(
React.createElement(Counter).render()
);
`

🧠 Architecture Overview

Component Instance
├─ fn (function component)
├─ props
├─ states[] ← useState
├─ effects[] ← useEffect
├─ memos[] ← useMemo / useCallback
├─ child ← last rendered VNode
├─ render() ← execute fn + diff
└─ patch() ← reuse instance on parent updates

🔍 Core Design Concepts

$3

`js
let CURRENT_COMPONENT = null;
`

Whenever a function component executes, it becomes the current component:

`js
CURRENT_COMPONENT = this;
vnode = this.fn(this.props);
`

This makes all hooks extremely simple:

seState

Persistent state stored in states[] with linear index:

`js
const idx = comp.stateIndex++;
if (comp.states[idx] === undefined) comp.states[idx] = initial;
`

seEffect

Dependency comparison + cleanup + post-DOM scheduling.

seRef

Mutable object persisted across renders.

seMemo / useCallback

Dependency-based memo cache inside the component instance.

$3

VElement.patch(newVNode)

- Replace if tag changes

- Otherwise reuse DOM and diff props

- Diff children sequentially

Component.patch(newVNode)

- Preserve component instance

- Only update props

- Re-execute render() to diff children

- Keeps all hook states stable, matching React behavior

This is one of the most elegant parts of your design.

$3

Easy React uses a simple publish-subscribe model:

`js
context.subscribers.add(callback)
``

When updates:

- All subscribers (components using the context) refresh

This is similar to React's internal behavior prior to Fiber optimizations.

$3

Minimal but powerful reducer model:

- Internal context object stores state

- dispatch triggers refresh

- Async reducers supported

📌 Limitations (Compared to React)

Easy React is intentionally small and educational:

- Children diff is index-based (no keyed diff yet)

- No Fiber architecture

- No concurrent mode

- No Suspense / lazy (can be added later)

- Fragment is simplified (rendered as a