DEV Community

Cover image for Mastering React: A Deep Dive into Memoization and Component Optimization

Mastering React: A Deep Dive into Memoization and Component Optimization

bilel salem on May 22, 2024

Hello Everyone, السلام عليكم و رحمة الله و بركاته, As mentioned Before, we will go through each note in the article "Advanced React Insights: Deep...
Collapse
 
lgtome profile image
Denys

Maybe good to know that React.memo can have a second argument function that can equal props and you can manipulate it.

Collapse
 
bilelsalemdev profile image
bilel salem

Thank you for the Information

Collapse
 
miguelrodriguezp99 profile image
Miguel

thank you very much for the information

Collapse
 
lotfijb profile image
Lotfi Jebali

Insightful, keep it up !

Collapse
 
vkpdeveloper profile image
Vaibhav Pathak

These articles doesn't make any sense now, just use React Compiler and you don't need to memoize yourself.

Collapse
 
brense profile image
Rense Bakker

React compiler is a bandaid for a problem that only exists because there's a split in the React community between people who think its not necessary to prevent excessive rerenders and people who figured out how problematic that is. I think it's still very useful to understand why memorization is needed because it helps to understand what React compiler does. It's also not just a React problem, shallow comparison issues pop up everywhere. Understanding the difference between values and references is essential knowledge for a good developer.

Collapse
 
vkpdeveloper profile image
Vaibhav Pathak

I think people needs to understand more about the memory consumption then just knowing what's useMemo, the problem is when they get to know useMemo, people just start using it all the places. Even if it doesn't make any sense, the same problem I see with React Compiler, they make some decisions but still they are literally doing memorization everywhere, which is not really a good or even required.

The first thought that comes to mind when you just know what useMemo does is wherever you see performance issue, you are like just use useMemo.

That's really bad.

Thread Thread
 
brense profile image
Rense Bakker

Performance issues is probably the last place where you should useMemo because it wil hide the actual problem. I'm more concerned with triggering renders where the state hasn't fully propagated because the reference to a state object got destroyed, which can cause weird behavior in the app and in worst case it can cause an infinite loop that blocks the cpu thread. Thats why I recommend to memoize everything thats not a string, number or boolean. You won't know 3 months from now when you're making a new component and passing props down, which ones are properly memoized and which aren't. Because react compiler intends to make you forget about any kind of memorization, this is the same strategy they employ. Memoize everything.

Collapse
 
bilelsalemdev profile image
bilel salem

Comapnies don't use React 19 until it will be Stable

Collapse
 
chafroudtarek profile image
Chafroud Tarek

Very helpful man 💯

Collapse
 
adem_bc profile image
Adembc

Great Job

Collapse
 
thunder6230 profile image
thunder6230

With react 19 all has gone 🙂

Collapse
 
faroukabichou profile image
Farouk Abichou

Great Job bilel