A React-like library built from scratch in TypeScript.
Just for fun to learn and experiment.
Arwaal is an educational implementation of React, built step by step to understand how React actually works under the hood. It implements the core architecture including fiber reconciliation, hooks, and the virtual DOM.
- 📦 Complete fiber architecture implementation
- 🔄 Concurrent rendering with work loop
- 🪝 Hooks implementation
- useState
- useEffect
- useRef
- useMemo
- useCallback
- 🌳 Virtual DOM with efficient diffing
- 🧩 Function components support
- The fiber reconciliation algorithm
- Hooks rely on a stable call order, explaining their restrictions
- React's performance comes from smart diffing and batched updates
- Effect timing explains many React behaviors that seem puzzling at first
# Install dependencies
npm install
# Run development server
npm run dev
# Run tests
npm run test
src/
├── core/ # Core implementation
│ ├── createElement.ts
│ ├── dom.ts
│ ├── fiber.ts
│ ├── render.ts
│ ├── hooks/ # All hooks in one folder
│ └── types.ts
├── lib.ts # Main library exports
└── main.ts # Demo code