React Performance Essentials

React performance talk/workshop

All exercises require:

npm install && npm start

0-game-initial-slowdown

When entering a hex color the app is blocking all the time.

identify & solve the performance issue

Together: How to identify a performance issue in React

1-packing-list-pushing-state-down

When creating a new item name the whole app seems to render

identify & solve the performance issue

Together: How to push state down

2-game-pushing-state-down

When entering a hex color the app is blocking all the time. In the previous exercise we've learned how to push state down. Try to figure out a dolution

Identify the issue
Give it a try in this game

3-game-pulling-content-up

Our boss Maureen wants to move components a little bit around. She wants the expensive component to be in the middle of the game. For obvious reasons.

See what happens.
How to make sure our game remains performant by entering a hex color

4-packing-list-react-library-tools

Earlier we've optimized the packing list. But clearly when interacting with the rest of the application a lot of rerenders are being triggered. Lets see what useCallback, useMemo & memo brings.

Identify the performance issue and come up with a solution. What tools to use when and how?

Together: Multiple solutions are possible. What is the prefered one.