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.