Over-rendering Due to Context Value Changes Causing Full Tree Updates

React component consumers re-render too frequently—even when their local state didn’t change—because the Context provider’s value object changes each render.

Passing a new object literal as context triggers consumers to update every time—even if value is logically same. Using useMemo prevents unnecessary re-renders ([turn0search4]turn0search6]). Fix: jsx Copy code const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]); <ThemeContext.Provider value={value}> {children} </ThemeContext.Provider>