React Fiber Visualizer

Step through React Fiber trees, state queues, reconciliation loops, and concurrent preemption.

Loading React Fiber Visualizer...

React Internals

Deep Dive into React Reconciliation & Fiber Schedulers

React Fiber is React’s reconciliation engine. Inspect virtual stack frames, fiber nodes, render/commit phases, and concurrent rendering prioritization.

01. Trigger State Update

Click component nodes to dispatch state updates and schedule fiber re-renders.

02. Watch Fiber Tree Swaps

Visualize the double-buffered Work-in-Progress fiber tree during render and commit phases.

Frequently Asked Questions

Everything you need to know about this developer tool

What is a React Fiber node?

A Fiber node is a virtual stack frame representing a React component instance, managing state, props, hooks, and DOM mutations.

Explore Other Utilities

ATS Resume Scanner

Scan and score resumes against Job Descriptions using AI analysis.

Open Utility

Event Loop Visualizer

Visualize JS call stack, microtasks queue, macrotasks queue, and Web APIs in real time.

Open Utility

Developer Formatter Studio

Format, beautify, validate, minify, and analyze SQL, JSON, JavaScript, CSS, HTML, XML, YAML, and Markdown client-side.

Open Utility

Loading Visualizer

Preparing your workspace...

React Fiber Visualizer

Step through React Fiber trees, state queues, reconciliation loops, and concurrent preemption.

React Fiber Simulator

Step-by-step visual reconciler timeline console

Simulation Source Code READ-ONLY

function BasicCounter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // Schedules Sync Update
  };

  return <button onClick={increment}>Count: {count}</button>;
}

JSX Transpiled Locally

Sim Controls

SPEED:

STEP PROGRESS1 / 6

Fiber Trees ConsoleInitial Idle State

The React Fiber Tree is fully compiled. The current tree pointer points to the active onscreen hierarchy. Alternate buffers are idle.

CURRENT SCREEN TREE

WORK IN PROGRESS (MEM)

WIP Buffers locked. Waiting for update trigger.

Reconciliation Stack

CALL STACK

👉 idle

RENDER SCHEDULE QUEUE

Queue is empty

Local AI Tutor

Hello! I am your offline React Internals Tutor. Ask me any question or click a Fiber node to inspect its attributes.

Loading React Fiber Visualizer...

React Internals

Deep Dive into React Reconciliation & Fiber Schedulers

React Fiber is React’s reconciliation engine. Inspect virtual stack frames, fiber nodes, render/commit phases, and concurrent rendering prioritization.

01. Trigger State Update

Click component nodes to dispatch state updates and schedule fiber re-renders.

02. Watch Fiber Tree Swaps

Visualize the double-buffered Work-in-Progress fiber tree during render and commit phases.

Frequently Asked Questions

Everything you need to know about this developer tool

What is a React Fiber node?

A Fiber node is a virtual stack frame representing a React component instance, managing state, props, hooks, and DOM mutations.

Explore Other Utilities

ATS Resume Scanner

Scan and score resumes against Job Descriptions using AI analysis.

Open Utility

Event Loop Visualizer

Visualize JS call stack, microtasks queue, macrotasks queue, and Web APIs in real time.

Open Utility

Developer Formatter Studio

Format, beautify, validate, minify, and analyze SQL, JSON, JavaScript, CSS, HTML, XML, YAML, and Markdown client-side.

Open Utility