How to Create Performant React Apps

How not to render box #1 when we click on box #3? That was my goal in this exercise. I used styled components and React hooks on CodeSandBox.

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.

I learned about this from Ken Wheeler in a keynote he gave in React Advanced London. I also used Robin Wieruch’s post to learn about styled components.

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.