Contrary to popular belief, by default, react component doesn’t care whether its props changed or not. It will always re-render when its parent rend

A Visual Guide to React Rendering - It Always Re-renders

submited by
Style Pass
2021-07-21 11:00:10

Contrary to popular belief, by default, react component doesn’t care whether its props changed or not. It will always re-render when its parent renders.

In normal rendering, React does not care whether “props changed” - it will render child components unconditionally just because the parent rendered!

When the state of C changes, only C renders. But when the state of B changes, both B and C render. The B renders because its state updates, and C renders because its parent renders.

When the state of A changes, A renders because of the state update, B renders because A rendered, and C renders because B rendered.

There are several ways to avoid unnecessary re-renders in React. In this article, I will only focus on React.memo and save other methods for future posts. If you are interested in alternatives to memo check out Dan Abramov’s Before you memo().

Also please keep in mind that in this post, I only explore re-renders caused by direct state update, or parent render. I don't pass any props.

Leave a Comment