🎭Component State Visualizer

See React's rendering behavior in action. Watch components re-render, understand why they update, and learn optimization patterns.

Learning Scenario

Understanding how useState triggers re-renders

Total Renders

Events

Track renders & show timeline

Turn on to record render events for this scenario.

Live Demo

Parent (has state)

Renders: 0

ChildDisplay

Count: 0

Renders: 0

Code Example

Current Code

1function Parent() {
2  const [count, setCount] = useState(0);
3  
4  return (
5    <div>
6      <button onClick={() => setCount(c => c + 1)}>
7        Increment
8      </button>
9      <ChildDisplay count={count} />
10    </div>
11  );
12}
13 
14function ChildDisplay({ count }) {
15  // Child re-renders when parent's state changes
16  // because it receives the count as a prop
17  return <div>Count: {count}</div>;
18}

📚 What's Happening?

When a parent component's state changes, React re-renders the parent AND all its children. This happens even if the children don't use the state directly.

💡 Key Learnings:

→useState triggers re-renders of the component and all children
→Children re-render when parent re-renders (by default)
→Passing state as props causes children to update
→React.memo can prevent unnecessary child re-renders