Advanced React Hacks 4/10 - Prevent Rerenders

Very obvious when you see the answer (and actually documented on react.dev, link later) but still worth mentioning for posterity.

You don't want to render too much, because one point of React is that it minimises the amount of rerenders on a screen (or is supposed to)

How do most working React developers see this? With the "highlight updates" tool of course

But, it is worth mentioning (in case it happens again, and for a lesson) that in 2019 with React Developer Tools v4, this killer feature was removed

To the React Team's credit, they restored "Highlight Updates" quickly

Anyway how do you prevent re-rendering? It's actually easy

Once the component has been initially rendered, you can trigger further renders by updating its state with the set function. Updating your component’s state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.) React.Dev "Managing State"

If you see too much of your screen rendering making it slow when taking actions (like clicking) break it down

Make more components... obvious, but worth mentioning the obvious

Until next time...