You don't need React.memo

Luan Carlos Macedo de Almeida — Mon, 26 Aug 2024 15:45:20 +0000

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!

Forem: Luan Carlos Macedo de Almeida

You don't need React.memo