danielberndt/performant-react-patterns

Supplementary Material for my Talk at React Berlin Feb 2024

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