React Rendering visual Guide – it’s always re-rendering

July 20, 2021

When will the React component be rerendered? Is it when its state or item changes?

Check out the GIF above 👆

The structure of the application is App > A > B > C.

Here’s a slightly simpler code:

Const App = () => {const ComponentA = () => < ComponentB /> Const ComponentB = () => < ComponentC />Copy the code

Components A, B, and C do not have any items or states. However, when applications are rendered, they are still re-rendered.

In normal rendering, React doesn’t care if “props changed” — it will render the child component unconditionally because the parent component rendered!

Mark Erikson – Complete guide to (mostly) React rendering behavior

To further illustrate this point, let’s add a state for each component and track its behavior.

When state C changes, only C renders. But when state B changes, both B and C render. Render in B as its status is updated, and render in C as its parent renders.

When state A changes, A renders due to state update B, renders due to A, renders due to B, and C renders due to B.

Avoid rerendering

There are several ways to avoid unnecessary re-rendering in React. In this article, I’ll just focus on react.Memo and save other methods for future posts. If you are interested in alternatives memo check Dan Abramov’s Before You Memo ().

Also keep in mind that in this article I have only explored rerenders caused by direct status updates or parent renders. I don’t pass around any props.

If you wrap a component in memo, it will not be re-rendered when its parent renders.

Note that C is updated when its state changes, but not when the parent renders.

Bring up a memorandum

Let’s hold the Memo up and see what happens.

Component status updates A, B, and C produce the same results as before. But watch out for status updates on the App. Wrapping a component memo prevents the entire subtree of that component from rerendering in response to the parent rendering.

That’s why you can hear advice like this:

What about the adjacent components?

The same rules apply to adjacent components. The component and memo will not be re-rendered in response to the parent rendering, thus preventing their entire subtree from re-rendering.

Should I write everything down?

If Memo has such a big impact on performance, does it make sense to wrap everything in it? Well, not really. But that’s a topic for another day. If you are interested, read fix slow render, and then fix the re-render by Kent C. Dodds.