React Composition
Hello everyone, today I want to talk about React performance.
The reason for this post is that I often come across posts, YouTube videos, and so on, suggesting the use of React.memo, useMemo, and similar tools. While these are decent tips, they’re not the best advice out there — but that’s okay.
I’ll show you that there are other ways to reduce the number of re-renders without using React.memo, useMemo, or similar approaches.
I also want to note that this topic has been extensively covered in many articles already. I’ll attach links to some of them below.
React Composition (The Simple Example):
Imagine two components: Parent and Child. The Parent component has a state that changes and causes it to re-render.
Render logs are displayed in the browser console (along with re-render highlights from the profiler).
As you can see, the Child component is not re-rendering. This happens because it is passed as a prop, and in this case, the prop does not change.
That’s it — it’s very simple!
References:
Before You memo() : A must-read article by Dan Abramov, along with others, as they provide plenty of tips and interesting insights about React.