Kar

Kar started this conversation 3 months ago.

Unnecessary re-rendering of Context consumers — caused by context value object instability

Context provider value defined inline causes every consumer to re-render on any state change—even if the specific value consumed didn't change.

Digiaru

Posted 3 months ago

React compares context value by reference. Defining objects/functions inline recreates them each render, triggering re-renders downstream even when data hasn’t changed ([turn0search2], [turn0search5], [turn0reddit16], [turn0search10]). Fixes: jsx Copy code const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]); <ThemeContext.Provider value={value}>... Split larger contexts into smaller ones so consumers re-render only when necessary.