bogdan-lyashenko/under-the-hood-reactjs

★ 6,777JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Explains React internals
      Block-scheme diagrams
      Written walkthroughs
    Coverage
      Stack reconciler v15
      Fiber architecture v16
    Artifacts
      SVG diagrams
      15-part article series
    Translations
      Chinese
      Korean
    Related
      Codecrumbs tool

mindmap root((repo)) What it does Explains React internals Block-scheme diagrams Written walkthroughs Coverage Stack reconciler v15 Fiber architecture v16 Artifacts SVG diagrams 15-part article series Translations Chinese Korean Related Codecrumbs tool

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Study how React's Stack reconciler processes updates step-by-step to deepen your understanding before debugging complex React apps.

USE CASE 2

Follow the Fiber architecture diagrams to understand why React 16 can pause and resume rendering work.

USE CASE 3

Use the clickable block-scheme diagrams as a reference when tracing unexpected rendering behavior in your own React code.

Tech stack

JavaScriptReactSVG

Getting it running

Difficulty · easy Time to first run · 5min

Documentation-only repository, open the SVG diagrams in a browser and read the articles, nothing to install.

No license information was mentioned in the explanation.

In plain English

This repository is a detailed written and visual explanation of how React works internally, created by a developer who stepped through the entire React source code with a debugger and mapped out all the logic as block-scheme diagrams. The goal is to show what actually happens inside React when you use it, rather than just what the public-facing API does. The content is divided into two main sections. The first covers the older Stack reconciler, which is how React worked up through version 15. That section is complete and split into 15 parts, each pairing a block-scheme diagram with a written explanation of the code flow. The author recommends keeping the article and its corresponding diagram open side by side to follow along with how data and control move through the system. The second section covers Fiber, the internal architecture React moved to in version 16. Fiber changed how React schedules and processes updates, allowing it to pause work and come back to it rather than doing everything in one uninterruptible pass. The Fiber section was still in early stages when this repo was last updated. The diagrams are the main artifact here. Each one is a large SVG image showing every function call and decision point in a particular part of the React codebase. They are clickable so you can open them in a new browser tab and zoom in to read the detail. Translations of the Stack section are available in Chinese and Korean. The author also started a separate project called Codecrumbs to make this kind of codebase documentation easier to produce for any JavaScript project.

Copy-paste prompts

Prompt 1

I'm reading under-the-hood-reactjs on the Stack reconciler. Walk me through what happens inside React when setState is called, following the function call chain shown in the diagrams.

Prompt 2

Using the under-the-hood-reactjs Fiber overview, explain how the work-loop lets React pause rendering and why that matters for animations and user input.

Prompt 3

I want to understand React's reconciliation algorithm. Walk me through the key decision points in the under-the-hood-reactjs block-scheme diagrams for a component update.

Prompt 4

Compare the Stack reconciler from under-the-hood-reactjs with Fiber, what specific problem did Fiber solve and how does scheduling differ?

Open on GitHub → Explain another repo

← bogdan-lyashenko on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.