AI

Context providers that pass unstable objects cause ALL consumers to re-render, even if the data they need hasn't changed. This is a potential performance killer.

Your Task:

  • The ThemeProvider creates a new { theme, toggleTheme } object every render
  • Wrap this value in useMemo so it stays referentially stable
  • This ensures that Header, which consumes context, only re-renders when the thread actually changes
TypeScript Solution
Loading...

Submit your code to see test results