For learning purposes, I challenged myself to write a small, naive, but working react. With its core functionalities.
The goal is to gradually, on my own, slowly converge to the design that is used in React's production code. Of course, with big constraints to make it feasible.
The end goal is to provide a useful, but not optimized reactivity library.
Currently features:
- Support for JSX
- Support for functional components
- State and reactivity provided by
useState
hook and props propagation - Efficient scheduling by delegating control back to main thread on fixed intervals
As simple as a
yarn dev
An example app is located at src/App.tsx
.
What is missing:
- Efficient rendering and painting: only on the sub-tree that had state changes
- Smart reconciliation that does work only when needed (on a Fiber's state dispatcher subtree or when props have changed; usage of alternate prop)
- Side effects through
useEffect
hook - Preserve interactivity states between re-renders (active focus, navigation)
Chore:
- Optimize commit-traversal algorithm
- Improve scheduler through counters (inspired by production React)