A Visual Guide to React Rendering - It Always Re-renders
source link: https://alexsidorenko.com/blog/react-render-always-rerenders/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A Visual Guide to React Rendering - It Always Re-renders
July 20, 2021
When does a React component re-render? Is it when its state or props change?
Take a look at the gif above 👆
The structure of the app is: App > A > B > C
.
Here is a slightly simplified code:
const App = () => {
// state
return (
<ComponentA />
)
}
const ComponentA = () => <ComponentB />
const ComponentB = () => <ComponentC />
Components A, B, and C don’t have any props or state. Yet, they still re-render when the App renders.
In normal rendering, React does not care whether “props changed” - it will render child components unconditionally just because the parent rendered!
Mark Erikson - A (Mostly) Complete Guide to React Rendering Behavior
To illustrate this point further, let’s add a state to every component and track the behavior.
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.
Avoiding re-renders
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.
If you wrap a component in memo
, it won’t re-render when its parent renders.
Notice that C updates when its state changes, but not when the parent renders.
Lifting memo up
Let’s lift memo
up and see what happens.
The state update of components A, B, and C produces the same results as before. But notice the state update on the App. Wrapping a component with memo
prevents the entire subtree of this component from re-rendering in response to parent render.
That’s why you can hear advice like this:
That React Component Right Under Your Context Provider Should Probably Use `React.memo`
— Sophie Alpert (@sophiebits) February 16, 2020
What about adjacent components?
The same rules apply to adjacent components. The component with memo
doesn’t re-render in response to parent render, and therefore, prevents its entire subtree from re-rendering.
Should I memo everything?
If memo
has such a great effect on performance, does it make sense to wrap everything with it? Well, not really. But this is a topic for another day. If you are interested, read Fix the slow render before you fix the re-render by Kent C. Dodds.
Next chapter
A Visual Giude to React Rendering - Props
Hi 👋 I'm Alex
I write about React
Don't miss the next part of A Visual Guide to React Rendering.
Subscribe to my newsletter to get notified when it comes out.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK