Master React Rendering: When to Re‑Render and How to Skip Unnecessary Updates

Why React Re‑renders

React is famous for its performance because it uses a virtual DOM layer and updates the real DOM only when necessary, which is much faster than constantly updating the DOM directly. However, React’s intelligence stops at this point; developers must understand its expected behavior and limitations to avoid accidental performance loss.

When Does React Re‑render a Component?

React decides to re‑render a component when its state changes (including changes from props or a direct setState call). By default, every state change triggers a re‑render, even if the visual output does not actually change.

Examples:

Component state changes → re‑render.

Parent component changes → re‑render.

Props change that does not affect the view → still re‑render.

In a deliberately exaggerated example, a Todo component re‑renders every second even though the unseen value never changes, demonstrating the cost of unnecessary renders.

2. Using shouldComponentUpdate

The shouldComponentUpdate method returns

true</strong> by default, which is why every update causes a re‑render. By overriding this method, developers can tell React when a re‑render is truly needed.</p><p>When React is about to render a component, it calls <code>shouldComponentUpdate

. If the method returns false, the render is skipped. Therefore, you need to rewrite shouldComponentUpdate to return true or false based on the data that actually matters for rendering.

In the Todo example, only changes to title or done should trigger a re‑render; changes to unseen can be ignored.

After applying the optimization, setState still runs every second, but render is called only on the initial load or when title or done change.

Important Note

Returning false from a parent’s shouldComponentUpdate does not prevent child components from re‑rendering due to their own state changes. It only stops updated props from being passed down.

Additional Content: Simple Performance Test

Writing and executing code inside shouldComponentUpdate can be expensive, so you should first measure how much time a normal React update cycle consumes. Use React’s performance tools to identify wasted cycles and make informed optimization decisions.

Identify which components waste the most rendering cycles and use shouldComponentUpdate to make them smarter.