Performant React Patterns

This is the code being shown at the React Meetup Berlin in February 2024.

Here's what belongs to what:

Pattern #1: Avoid Setting State within Hooks

App1 + useMousePosition-1 & useMousePosition-2

Pattern #2: Replacing useMemo with useRef

App1 + useMousePosition-3

Pattern #3: Avoid React State for 60fps Interactions

App2a + App2b

Pattern #4: Separate Frequently Rendered and Expensive Components

App3a + App3b + App3c + App3d

Pattern #5: Avoid State towards the Root of your App

App4a + App4b