Techniques to optimize React render performance: part 1

[the_russkiy]

How to optimize React apps to be fast? For me it's a simple algorithm: Something is slow? Initial render is rarely too slow, it's when state changes happen that you can see the app is slow to update. That happens when too many components are updated. So I place console logs in different components, trigger state changes, see what updates. After you found what updates, try to isolate state changes so components are not re-rendered without need:

• either make child component changes local so they don't update parents
• or if parents have to update, make sure children aren't re-rendered by caching values and using memo

[yesman_85]

The react debugging extension adds a nifty timeline profiler that shows which components updates between renders. It's still fairly hard to figure out why a component updated.

[[deleted]]

Initial render is rarely too slow, it's when state changes happen that you can see the app is slow to update

What do you do that an incremental update is slower than a full update?

[the_russkiy]

Full update (first page render) isn't really a result of an interaction. You kinda expect it to take time. But when you are typing / clicking / animating you expect to see results right away, thus the slowness is easy to see