# acdlite/react-fiber-architecture architecture

> Architecture diagram of the GitHub repository acdlite/react-fiber-architecture, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/acdlite/react-fiber-architecture
- Repository: https://github.com/acdlite/react-fiber-architecture

## Overview

This repository contains a README describing React Fiber, not implementation source. The graph therefore maps only the documented architecture: an update triggers reconciliation, which computes changes for a renderer to apply. Scheduling, incremental work, and pause/abort/reuse are described as Fiber goals; the README says scheduling is not yet used significantly. All repository nodes point to README.md, and the relationships are limited to those the document describes.

Main entry points: [`README.md`](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md) (Work scheduling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_updates["Updates and scheduling"]
  node_ui_update["UI update<br/>[README.md]"]
  node_scheduler["Work scheduling<br/>[README.md]"]
  node_priorities["Update priorities<br/>[README.md]"]
  node_incremental["Incremental work<br/>[README.md]"]
  node_work_control["Pause, abort, reuse<br/>[README.md]"]
  node_concurrency["Concurrency primitives<br/>[README.md]"]
end

subgraph group_reconciliation["Reconciliation"]
  node_fiber_reconciler["Fiber reconciler<br/>[README.md]"]
  node_component_tree["Component tree<br/>[README.md]"]
  node_tree_diff["Tree diff<br/>[README.md]"]
  node_change_set["Computed changes<br/>[README.md]"]
end

subgraph group_rendering["Rendering targets"]
  node_renderer["Renderer<br/>[README.md]"]
  node_react_dom["React DOM<br/>[README.md]"]
  node_react_native["React Native<br/>[README.md]"]
  node_render_environment["Rendering environment<br/>[README.md]"]
end

node_developer(("Application developer"))

node_developer -->|"initiates"| node_ui_update
node_ui_update -->|"creates work"| node_scheduler
node_scheduler -->|"assigns priority"| node_priorities
node_scheduler -.->|"can split work"| node_incremental
node_scheduler -.->|"can control work"| node_work_control
node_scheduler -.->|"supports primitives"| node_concurrency
node_ui_update -->|"triggers re-render"| node_fiber_reconciler
node_fiber_reconciler -->|"generates"| node_component_tree
node_fiber_reconciler -->|"diffs trees"| node_tree_diff
node_tree_diff -->|"computes"| node_change_set
node_change_set -->|"provides changes"| node_renderer
node_renderer -->|"renders to"| node_react_dom
node_renderer -->|"renders to"| node_react_native
node_react_dom -->|"updates DOM"| node_render_environment
node_react_native -->|"updates native views"| node_render_environment

click node_ui_update "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_scheduler "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_priorities "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_incremental "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_work_control "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_concurrency "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_fiber_reconciler "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_component_tree "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_tree_diff "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_change_set "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_renderer "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_react_dom "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_react_native "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"
click node_render_environment "https://github.com/acdlite/react-fiber-architecture/blob/master/README.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_ui_update,node_scheduler,node_priorities,node_incremental,node_work_control,node_concurrency toneBlue
class node_fiber_reconciler,node_component_tree,node_tree_diff,node_change_set toneAmber
class node_renderer,node_react_dom,node_react_native,node_render_environment toneMint
class node_developer toneIndigo
```

## Components

### Updates and scheduling

- [UI update](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Work scheduling](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Update priorities](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Incremental work](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Pause, abort, reuse](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Concurrency primitives](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`

### Reconciliation

- [Fiber reconciler](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Component tree](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Tree diff](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Computed changes](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`

### Rendering targets

- [Renderer](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [React DOM](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [React Native](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`
- [Rendering environment](https://github.com/acdlite/react-fiber-architecture/blob/master/README.md): `README.md`

### Other components

- **Application developer**

## Connections

- Application developer → UI update: initiates
- UI update → Work scheduling: creates work
- Work scheduling → Update priorities: assigns priority
- Work scheduling → Incremental work: can split work
- Work scheduling → Pause, abort, reuse: can control work
- Work scheduling → Concurrency primitives: supports primitives
- UI update → Fiber reconciler: triggers re-render
- Fiber reconciler → Component tree: generates
- Fiber reconciler → Tree diff: diffs trees
- Tree diff → Computed changes: computes
- Computed changes → Renderer: provides changes
- Renderer → React DOM: renders to
- Renderer → React Native: renders to
- React DOM → Rendering environment: updates DOM
- React Native → Rendering environment: updates native views