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.
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?
< of >
Want to be notified when I add a new explainer?
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-2023 Tezify All Rights Reserved. Created in India. GSTIN : 24BBQPS3732P1ZW.