How to Create Performant React Apps
This is the code I started with:
Here’s how to convince yourself that when you click on a box in this implementation, React renders all the other boxes: open this app, open the dev tools, and go to the React profiler. You’ll see that:
Click on the record button on the left top corner of the dev tools, then click on one of the boxes, stop the recording, and click on the “Ranked” display of the profiler (the bars icon on the right to the default chosen fire icon).
This will show you all the components that have been rendered, and if you click on the cogwheel under the “Performance” tab, you can toggle on the option to record why each component rendered while profiling. Then when you click on a component in the “Ranked” display — you’ll see on the right side of the dev tools what’s the reason for the rendering, for example, box #1 was rendered because onClick and isActive changed:
Problem is — also box #2 and #3 were rendered after clicking on box #1, and in case of many components — this rendering can slow down your app without any reason.
This is the way to use UseCallback and React.memo to prevent these renders:
You can do the same process of profiling like described above for this implementation in this link.