Mini React with Fiber

A minimal implementation of React's Fiber reconciliation algorithm. This project helps understand how React's core reconciliation process works under the hood.

Features

• Custom React-like implementation with Fiber architecture
• Basic component lifecycle and reconciliation
• Support for both functional and class components
• State management with setState
• Virtual DOM diffing and patching
• Incremental rendering with work units

Project Structure

my-react/
├── src/
│   ├── lib/
│   │   ├── react/           # New Fiber implementation
│   │   │   ├── component.js # Component base class
│   │   │   ├── element.js   # createElement implementation
│   │   │   ├── index.js     # Main React exports
│   │   │   └── reconciler.js# Fiber reconciler
│   │   └── react-old/       # Classic stack reconciler implementation
│   ├── utils/               # Utility functions
│   └── index.jsx           # Demo application

Key Concepts

Fiber Architecture

The Fiber implementation breaks down rendering work into small units that can be paused and resumed. This enables:

• Incremental rendering
• Better prioritization of updates
• Improved responsiveness for complex UIs

Main Components

• Reconciler : Handles the diffing process and manages the Fiber tree
• Component : Base class for React components with state management
• Element : Handles creation of React elements (Virtual DOM nodes)

Getting Started

1. Install dependencies:

pnpm install

2. Start development server:

pnpm start

3. Build for production:

pnpm build

Example Usage

import React from "./lib/react"

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { show: true }
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ show: !this.state.show })}>
          Toggle
        </button>
        {this.state.show && <h1>Hello React</h1>}
      </div>
    )
  }
}

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

Implementation Details

1. Fiber Node Structure : Each Fiber node contains:

   • Type and props
   • Parent, child, and sibling references
   • Effect tags for updates
   • State and alternate (previous tree) references

2. Work Phases :

   • Render/Reconciliation (can be interrupted)
   • Commit (uninterruptible)

3. Effect Management :

   • PLACEMENT: New nodes
   • UPDATE: Changed props/state
   • DELETION: Removed nodes