renderingintermediate

Component Re-rendering

A re-render occurs when React calls a component function again to compute its updated Virtual DOM subtree.

Mental Model

"The Refresh: Refreshing the weather dashboard repaints current temperatures without needing to rebuild the entire computer screen."

Interactive Engine Simulation

Simulation Engine Idle

Click "Execute Code" to run state reconciliation simulation.

Executable Code Snippet

Component.jsx

JSX / React 19

1function Parent() {
2  const [count, setCount] = useState(0);
3  console.log("Parent rendered");
4
5  return (
6    <div>
7      <button onClick={() => setCount(c => c + 1)}>
8        Update State
9      </button>
10      <Child />
11    </div>
12  );
13}
14
15function Child() {
16  console.log("Child rendered");
17  return <p>I am a child</p>;
18}

Technical Takeaways & Best Practices

01.Component re-renders are triggered by state or prop changes.
02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
03.Automatic batching optimizes multiple state updates into a single render cycle.

01. The Chain Reaction

A re-render is triggered by three things: **State Change**, **Prop Change**, or **Context Change**. By default, when a parent component re-renders, React recursively re-renders **all** of its children, regardless of whether their props changed. This ensures the UI remains consistent with the latest logic.

Render Cascade

Parent (State Update)

↓

Child A

Child B

02. Virtual vs Real DOM

It's important to distinguish between **Rendering** (calculating the VDOM) and **Painting** (updating the screen). React might re-render a component 100 times, but if the VDOM output is identical, the browser's Real DOM isn't touched. This is why "unnecessary re-renders" are often less expensive than they seem, though they should still be managed in heavy apps.

Architectural Advice

"Don't reach for 'memo' or 'useCallback' prematurely. React is incredibly fast. Focus on clean data structures first, and only optimize when you detect visible jank using the Profiler."