oveReact

Situation

Using React on a daily basis often makes the framework feel like "magic," abstracting away the complex processes of state management, component lifecycles, and efficient DOM rendering. To become a more proficient frontend engineer, I wanted to demystify these abstractions and deeply understand what happens beneath the surface when useState is called or a component re-renders.

Task

The goal was to build a fully functional, lightweight clone of React entirely from scratch using TypeScript. It needed to move beyond simple brute-force DOM updates and instead replicate React's sophisticated core mechanisms, including a Virtual DOM, a smart reconciliation (diffing) algorithm, and a robust implementation of the standard Hooks system.

Action

I engineered oveReact from the ground up without relying on any external UI libraries. The implementation included several core components:

1. The Virtual DOM Engine

• Developed a custom createElement function to handle JSX transpilation.
• Built a recursive renderNode engine capable of translating deeply nested Virtual DOM objects into actual, interactive physical HTML DOM nodes.

2. Smart Diffing Algorithm

• Engineered an updateElement algorithm that intelligently compares the old and new Virtual DOM trees.
• Ensured the reconciliation process updates only the specific physical DOM nodes that changed, mimicking React's strategy to avoid expensive, full-page repaints.
• Integrated native DOM refs, allowing physical HTML elements to be intercepted and attached natively so that imperative DOM methods (like .focus()) function as expected.

3. Hooks System

• Built a comprehensive Hooks engine leveraging advanced closure concepts.
• useState: Implemented stateful memory using pointer indexes, enabling targeted component re-renders via a custom triggerRerender loop.
• useEffect: Developed dependency tracking mechanisms that utilize setTimeout to guarantee execution only after the DOM has fully painted.
• useRef: Maintained memory persistence across renders using standard mutable { current } objects.

4. CLI Scaffolding Tool

• Created a built-in executable CLI script (cli.ts) that mimics the functionality of tools like create-react-app.
• Allowed users to instantly scaffold a fresh project powered by the oveReact framework via bun cli.ts my-new-app, complete with a full starter template.

Result

The resulting project is a robust, custom frontend framework that faithfully replicates standard React behavior.

• Deepened Expertise: This process fundamentally transformed my understanding of React from treating it as a black box to having a clear, mechanical comprehension of its internal workings.
• Efficient Architecture: The custom diffing engine successfully prevented unnecessary repaints, proving the efficacy of the Virtual DOM pattern.
• Developer Experience: The addition of the CLI scaffolding tool provided a seamless developer experience, making it incredibly easy to spin up new projects utilizing the custom framework.