𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝗶𝗻𝗴 𝘆𝗼𝘂𝗿 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽

Do checkout the video for more details:

https://youtu.be/2woSmgfUjC8

If you have a parent-child component structure then Whenever the parent state changes it will re-render.
Do you know it will even re-render your child? No matter if your child uses any prop or not it will still re-render.

Ideally, Child should re-render only if: parent prop or method used inside the child is changed.

𝗛𝗼𝘄 𝘁𝗼 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 ?
The solution is "𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼"

React.memo (is a higher-order component) takes the component and memoizes the rendered output of the wrapped component.

So whenever there is a re-render in the parent, For a child it will compare the props and if all the props are the same it reuses the memoized result skipping the next rendering.

𝗢𝗯𝘀𝗲𝗿𝘃𝗮𝘁𝗶𝗼𝗻:

• Pressing the "click" button, updates the state due to which re-renders
• is re-rendered every time "Parent" is re-rendered (even it is not using any parent state)
• is not re-rendered when "Parent" is re-rendered (As it is using memoised result)

𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗽𝗼𝗶𝗻𝘁𝘀:

1. If you are using function as a prop in your child, it will still re-render even if props are the same in comparison (let's discuss it in the next post)

2. If you are thinking to have every component to use React.memo then it may overkill the performance in some scenarios where it will first compare the props if they are not the same it will still do the re-rendering (extra comparison check)

3. Do check the profiler to actually figure out if it will be worth using it

4. If a child is re-rendering it doesn't mean it is costly unless it is doing the "commit" phase which actually does the real DOM changes.

5. Before preventing re-renders, Do fix your SLOW renders.

Do share your thoughts in the comments