Why React re-renders & when do we need to worry about it?

⇦ Home / Jargon Free Introductions

Why does React re-render and when do we need to worry about it?

Every re-render in React starts due to a change change. Central to React's UI programming paradigm is [a] Our code takes care of updating the state and [b] React keeps a watch over the state & re-renders things whenever the state changes.

For a given state-change, React determines what to re-render based on a few rules.

Whenever the state within a component changes, React re-renders that component.

Run this code snippet on CodeSandBox

Whenever a component re-renders, React also rerenders all of its children components.

Run this code snippet on CodeSandBox

When the value in a context provider changes, all the components using the context re-render.

Run this code snippet on CodeSandBox

Despite the prudent rules, React can end up re-rendering components with no UI changes.

Run this code snippet on CodeSandBox

To avoid re-rendering a component unless its prop values change, we can use the React.memo

Run this code snippet on CodeSandBox

Not every re-render is expensive, so we need not wrap every component within useMemo. Re-rendering of a component that affects a small number of on-screen elements may hardly consume any browser resources. In contrast, re-rendering of a component that triggers re-rendering of many other components may be expensive.

Re-rendering a component doesn't always lead to repainting of elements on the browser DOM. For every component re-render, React determines the DOM changes needed to reflect the UI change. For components triggered to re-render despite no UI changes, React will not perform the DOM changes.

Before trying to optimize re-renders, we need to root cause a slow or an unresponsive UI.

Want to be notified via email when a new explainer is added?

Submit

< of >

Want to be notified when I add a new explainer?

Submit

I create about one or two of these every month (whenever I find time between my webdev work) & you can unsubscribe at any time. 💨

Copyright (c) 2017-2024 Tezify All Rights Reserved. Created in India. GSTIN : 24BBQPS3732P1ZW.