Many developers use React.memo without understanding why a component is rendering and its usage, with the pressure to meet deadlines and deliver the committed tickets we often find ourselves just using it because “it’s working”.
Before we walk through React.memo let’s start this post with a simple question 🙋🏽
Do you know why your component is re-reading?
I’m not here to provide a deep explanation, so here’s the straightforward answer: Your component has been re-rendered because its state has been updated ✨🦄✨.
So, if I’m telling you that you don’t need React.memo, then how do you fix your re-rendering issues? 😡
Image the scenario where you have an App rendering 2 other children, but only one of them needs to receive the updated value.
In our example the Parent component has its state updated, and all the children will be re-rendered, like in the image below. Normally you fix this rendering issue by wrapping the children with “React.memo” or using another memorisation solution.
But I am here to show you two simple solutions for that:
- Move the state manipulation to the child component witch need it, isolating the render and creating a better separation of concerns.
- Make the Parent element accept a child, it means the child won’t be re-rendered when the state of the parent change, using that approach you can create a optimised and flexible component
I am not here to advocate against React memorisation! Instead I just want to show you that you don’t need to use diferentes features or tools to improve your performance, you just need to organize your code better.
That is all folks!
Top comments (2)
Yes, you don't need React.memo, but you do need useMemo and useCallback, to maintain referential equality between renders so the props of child components or the inputs of custom hooks don't change. At least until React 19 which automatically memoizes everything 😅
It's depends. In many cases if you use the approach in the text it's not necessary to use memoization, for sure if you have a more complex logic, you should consider using useCallback and useMemo.
My point is that moving this logic to useCallback won’t necessarily improve performance; in fact, it might even make it worse
In general, when a non-primitive value is used as a dependency, it should have a stable reference between re-renders, even if it’s derived from a chain of props.