Don't overoptimize your React App

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