⚛️ Re-render Triggers

? Quick Overview

A re-render happens when React decides that a component’s output may have changed and it needs to call the component again to compute the new UI.

• React compares the previous Virtual DOM tree with the new one.
• Only the parts of the real DOM that changed are updated.
• Knowing what triggers re-renders helps you avoid unnecessary work and keep apps fast.

? Key Concepts: What Triggers a Re-render?

• 1. State changes — any update using useState or this.setState causes a re-render.
• 2. Props changes — when a component receives new or changed props from its parent.
• 3. Context value changes — when a consumed context value is updated.
• 4. Parent re-renders — children re-render when their parent re-renders (unless memoized).
• 5. Force updates — calling forceUpdate() in class components.

? Theory & Syntax

React components are pure functions of props and state:

• Whenever state changes → component is scheduled to re-render.
• Whenever props change → component is scheduled to re-render.
• When a parent re-renders → all its children are checked and usually re-render too.
• React may batch multiple state updates into a single re-render for performance.

? Example 1 — State Change Trigger

Here, updating the count state triggers a re-render on every button click.

// Counter re-renders every time its state (count) changes
import { useState } from "react";

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

console.log("Counter component re-rendered");

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

? Example 2 — Prop Change Trigger

When the parent’s state changes, it passes a new prop to the child, which triggers the child’s re-render.

// Child re-renders whenever the value prop coming from Parent changes
import { useState } from "react";

function Child({ value }) {
console.log("Child re-rendered");
return <p>Value: {value}</p>;
}

function Parent() {
const [num, setNum] = useState(0);

return (
<div>
<button onClick={() => setNum(num + 1)}>Update Parent</button>
<Child value={num} />
</div>
);
}

⚙️ Avoiding Unnecessary Re-renders

If a component keeps re-rendering even when its inputs don’t change, you can optimize it using React.memo, useCallback, and useMemo.

• ✅ Use React.memo() to memoize components that receive unchanged props.
• ✅ Use useCallback() to avoid recreating functions on every render.
• ✅ Use useMemo() to cache expensive calculations.
• ✅ Split large components into smaller pieces.
• ✅ Avoid setting the same state value repeatedly (e.g. setCount(count)).

// MemoizedChild only re-renders when its props actually change
const MemoizedChild = React.memo(function Child({ value }) {
console.log("MemoizedChild rendered");
return <p>Value: {value}</p>;
});

? Re-render vs Repaint

• Re-render: React calls your component again, builds a new Virtual DOM tree, and compares it with the previous one.
• Repaint: After React updates the real DOM, the browser updates pixels on the screen.

Not every React re-render leads to a heavy visual repaint — React and the browser both try to minimize expensive work.