{
  "generator": {
    "name": "Symvanta",
    "url": "https://symvanta.com"
  },
  "page": {
    "url": "https://symvanta.com/architecture/react",
    "title": "React Architecture: How the Codebase Actually Works",
    "description": "React's 358-module map spans the Fiber reconciler, the React Compiler's HIR, and React DevTools, with a 3,046-symbol Jest cluster excluded and 16 dependency cycles, mapped by Symvanta.",
    "datePublished": "2026-05-21",
    "dateModified": "2026-07-17"
  },
  "repository": {
    "name": "facebook/react",
    "url": "https://github.com/facebook/react",
    "commit": "f598ec1",
    "license": "MIT"
  },
  "graph": {
    "modules": 358,
    "dependencyCycles": 16,
    "modularityQ": 0.85,
    "largestCycleFiles": 222,
    "mutuallyRecursiveGroups": 96
  },
  "summaryMarkdown": "React is Meta's UI library and the renderer, compiler, and devtools ecosystem that ships alongside it in one monorepo: the core `react` package that exposes hooks and `createElement`, the Fiber reconciler that schedules and commits updates, per-target renderers (`react-dom`, `react-native-renderer`, `react-test-renderer`, `react-art`), the Flight protocol for React Server Components (`react-server`, `react-client`), the React Compiler that auto-memoizes components at build time, and React DevTools for inspecting all of it at runtime. [Symvanta](https://symvanta.com)'s Louvain community detection organized the codebase's indexed symbols into 358 functional clusters (modularity Q=0.85, a clean separation of concerns for a codebase that ships five different products out of one source tree). The single largest cluster, at 3,046 symbols, is the Jest test framework (hub `Component`): the `expect`, `describe`, `it`, and fixture components every package's test suite shares, excluded from the diagram below the same way etcd's end-to-end harness was excluded from its own map. Underneath that sits the real product shape: the React Compiler's HIR machinery (`GeneratedSource`, 2,061 symbols: source-location and identifier tracking for lowered code) is the largest product cluster, followed by the Fiber reconciler (`React Fiber Core`, 1,928 symbols, hub `Fiber`), which schedules and commits `Fiber` nodes under a `FiberRoot`, prioritized by `Lanes`. The public hooks surface (`useEffect` cluster, 1,376 symbols) is where every hook, `useEffect` included, resolves its current dispatcher through `resolveDispatcher` before doing any work. React DevTools contributes three of the ten largest clusters (`ElementType`, `Rect`, and the DevTools half of the `useEffect` cluster): the element-kind, timeline-geometry, and call-site inspection types the DevTools frontend and backend bridge share.",
  "subsystems": [
    {
      "name": "The Fiber reconciler",
      "descriptionMarkdown": "`React Fiber Core`, 1,928 symbols, hub `Fiber`. This is the scheduler and commit engine every renderer shares: it walks a tree of `Fiber` nodes rooted at a `FiberRoot`, assigns each unit of work a priority `Lane`, and holds the shared React types (`ReactContext`, `ReactSharedInternals`, `Lanes`, `Wakeable`) in the same cluster. Its heaviest outbound edge, and the single heaviest cross-module edge on the whole map, runs into `React Rendering Utilities` (the `__DEV__` cluster) 452 times, with further traffic into the react-dom host layer (105) and Flight (`ReactComponentInfo`, 82). The [Fiber reconciler spoke](/architecture/react/fiber-reconciler) traces a `setState` call from scheduling through commit."
    },
    {
      "name": "React Compiler: HIR and source tracking",
      "descriptionMarkdown": "`Code Location Tracking`, 2,061 symbols, hub `GeneratedSource`, the largest non-test cluster in the repository. The compiler's high-level intermediate representation: `SourceLocation`, `Place`, `Identifier`, `BlockId`, and `InstructionId` are the pieces every lowering pass threads through, calling into `react_compiler_ast` (7) and `HIR` (5) as it moves from parsed AST to memoizable instructions."
    },
    {
      "name": "The core hooks surface",
      "descriptionMarkdown": "`React Rendering Core`, 1,376 symbols, hub `useEffect`. A blended cluster: the public hooks surface (`useEffect` and its siblings) sits next to DevTools' element and hook inspection types (`ReactCallSite`, `Element`, `SerializedElement`, `Store`). Its heaviest edges run into DevTools rather than the reconciler at this commit: `ElementType` (134) and `Rect` (26), plus its own `hooks` submodule (22) and the reconciler (13). The dispatcher-resolution logic every hook goes through is dissected in the [hooks dispatcher spoke](/architecture/react/hooks-dispatcher)."
    },
    {
      "name": "React rendering plumbing",
      "descriptionMarkdown": "`React Rendering Utilities`, 1,497 symbols, hub `__DEV__`. A cross-package plumbing cluster anchored by the development-mode flag referenced from nearly every file (not a function worth reading), holding `resolveDispatcher`, `Dispatcher`, `ReactNodeList`, `RenderState`, and `Request`. It calls back into the reconciler 146 times and into Flight (`ReactComponentInfo`) 87 times, the shared machinery both the render and the server paths reach through."
    },
    {
      "name": "Flight and Server Components",
      "descriptionMarkdown": "`React Client Utilities`, 1,275 symbols, hub `ReactComponentInfo`, carries the Flight protocol's component and request metadata: `ReactDebugInfo`, `Thenable`, `ReactClientValue`, `Response`. It calls into `React Rendering Utilities` (`__DEV__`) 278 times and the reconciler 37 times, the point where a resolved server payload becomes fiber updates on the client. Its `reportGlobalError` is where a broken stream rejects every chunk still pending."
    },
    {
      "name": "React DevTools",
      "descriptionMarkdown": "Two clusters belong squarely to DevTools: `Device Management` (`ElementType`, 974 symbols: the backend/frontend bridge's element-kind and host-instance types) and `View Rendering Components` (`Rect`, 642 symbols: the profiler timeline's geometry, `Point`, `Size`, `View`, `TimelineData`). `ElementType` calls into the hooks surface (`useEffect`) 111 times and the reconciler 75 times; `Rect` calls into the hooks surface 27 times and the reconciler 11 times, the timeline and inspector reading live fiber state."
    },
    {
      "name": "react-dom host layer",
      "descriptionMarkdown": "`Rendering Components`, 789 symbols, hub `Instance`. The react-dom host config: `DOMEventName`, `Container`, `SuspenseInstance`, `TextInstance`, `Props`, the types the reconciler drives to mutate the actual DOM. It calls into the reconciler 295 times, the single heaviest edge pointing into `React Fiber Core`, and into `__DEV__` 126 times."
    },
    {
      "name": "React Compiler fixture corpus and tooling",
      "descriptionMarkdown": "`Identity Management`, 721 symbols, hub `identity`, is the React Compiler's own test-fixture mass: small sample React components (`makeObject_Primitives`, `useIdentity`, `makeArray`, `useHook`) the compiler's snapshot tests compile and re-compile to check the transform's output, not part of the compiler itself, which is why its hub `identity` is trimmed from the load-bearing list above rather than linked. `Execution Control` (595 symbols, hub `theme`) is a genuinely mixed cluster: alongside DevTools' UI theme constants sit `exec`, `argv`, `statSync`, and `unlinkSync`, the release and build scripts that share enough call traffic with the theme module to cluster together. It calls into `GeneratedSource` (8) and `cloneAst` (5), the compiler-tooling side of the cluster surfacing rather than the UI-theme side."
    }
  ],
  "startReading": {
    "symbols": [
      {
        "name": "Fiber",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react-reconciler/src/ReactInternalTypes.js#L89"
      },
      {
        "name": "ReactContext",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/shared/ReactTypes.js#L58"
      },
      {
        "name": "GeneratedSource",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts#L40"
      },
      {
        "name": "ReactCallSite",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/shared/ReactTypes.js#L191"
      },
      {
        "name": "ReactComponentInfo",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/shared/ReactTypes.js#L210"
      },
      {
        "name": "ElementType",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react-devtools-shared/src/frontend/types.js#L59"
      },
      {
        "name": "Rect",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react-devtools-timeline/src/view-base/geometry.js#L22"
      },
      {
        "name": "createElement",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/jsx/ReactJSXElement.js#L610"
      },
      {
        "name": "useEffect",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/ReactHooks.js#L87"
      },
      {
        "name": "resolveDispatcher",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/ReactHooks.js#L24"
      },
      {
        "name": "CompilerError.invariant",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts#L307"
      },
      {
        "name": "reportGlobalError",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react-client/src/ReactFlightClient.js#L1139"
      },
      {
        "name": "setProperty",
        "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/compiler/packages/snap/src/sprout/shared-runtime.ts#L83"
      }
    ],
    "endpoints": []
  },
  "requestFlow": [
    {
      "position": 1,
      "symbol": "useEffect",
      "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/ReactHooks.js#L87",
      "markdown": "[`useEffect`](https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/ReactHooks.js#L87) is the public hook. In development it warns if the effect callback is missing, then calls `resolveDispatcher()` and delegates to `dispatcher.useEffect(create, deps)`."
    },
    {
      "position": 2,
      "symbol": "resolveDispatcher",
      "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/ReactHooks.js#L24",
      "markdown": "[`resolveDispatcher`](https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react/src/ReactHooks.js#L24) reads `ReactSharedInternals.H`. Every other hook in the file (`useState`, `useContext`, `useRef`, and the rest) calls the same function first. If `H` is `null`, development mode logs the \"Invalid hook call\" warning readers of the React docs will recognize, then returns the dispatcher regardless (a null dereference is the actual failure mode outside render)."
    },
    {
      "position": 3,
      "symbol": "ReactSharedInternals",
      "sourceUrl": "https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/shared/ReactSharedInternals.js#L12",
      "markdown": "[`ReactSharedInternals`](https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/shared/ReactSharedInternals.js#L12) is the module-level singleton whose `H` field points at whichever hooks dispatcher is currently active."
    },
    {
      "position": 4,
      "symbol": null,
      "sourceUrl": null,
      "markdown": "That field is set by [`renderWithHooks`](https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react-reconciler/src/ReactFiberHooks.js#L502) in the Fiber reconciler, immediately before it calls the function component being rendered, and reset to `null` immediately after. It installs one of two concrete implementations of the [`Dispatcher`](https://github.com/facebook/react/blob/f598ec1c29c98c368e0a576d4e0cf58831038140/packages/react-reconciler/src/ReactInternalTypes.js#L397) interface, a mount dispatcher on a component's first render and an update dispatcher on every render after, which is why the same `useEffect` call allocates a new hook on mount but reuses its slot on update."
    }
  ],
  "deepDives": [
    {
      "title": "React Fiber Reconciler: How React Schedules and Commits Updates",
      "url": "https://symvanta.com/architecture/react/fiber-reconciler",
      "description": "How React's Fiber reconciler turns a setState into DOM changes: Fiber and FiberRoot, lanes, the beginWork/completeWork render walk, and the commit phase."
    },
    {
      "title": "React Hooks Dispatcher: How useState Resolves on Mount and Re-render",
      "url": "https://symvanta.com/architecture/react/hooks-dispatcher",
      "description": "How React hooks resolve: ReactSharedInternals.H, resolveDispatcher, the mount vs update dispatchers renderWithHooks installs, and the hook linked list."
    }
  ],
  "diagrams": [
    {
      "url": "https://symvanta.com/architecture/react/module-map.svg",
      "encodingFormat": "image/svg+xml"
    }
  ]
}