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>;
}

Not executed: prepared steps for this example

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

Fiber Q&A

Ask a question or click a Fiber node to inspect it. Answers are prepared explanations picked by keywords in your question.

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

Answers about this 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.

React Fiber Visualizer

React Fiber Simulator

Deep Dive into React Reconciliation & Fiber Schedulers

Trigger State Update

Watch Fiber Tree Swaps

Frequently Asked Questions

What is a React Fiber node?

Related tools

JavaScript Event Loop Visualizer

All Learning & Visualizers tools

🍪 We value your privacy

React Fiber Simulator