React: What is React context performance optimization?

1// ❌ All consumers re-render when any value changes
2const AppContext = createContext({
3  theme: "light",
4  user: null,
5  settings: {},
6});

1const ThemeContext = createContext("light");
2const UserContext = createContext(null);
3const SettingsContext = createContext({});
4
5function AppProvider({ children }) {
6  const [theme, setTheme] = useState("light");
7  const [user, setUser] = useState(null);
8  const [settings, setSettings] = useState({});
9
10  return (
11    <ThemeContext.Provider value={theme}>
12      <UserContext.Provider value={user}>
13        <SettingsContext.Provider value={settings}>
14          {children}
15        </SettingsContext.Provider>
16      </UserContext.Provider>
17    </ThemeContext.Provider>
18  );
19}
20
21// Only ThemeContext consumers re-render when theme changes
22function Header() {
23  const theme = useContext(ThemeContext);
24  return <header className={theme}>...</header>;
25}

1function AppProvider({ children }) {
2  const [theme, setTheme] = useState("light");
3
4  const value = useMemo(() => ({
5    theme,
6    setTheme,
7  }), [theme]);
8
9  return (
10    <ThemeContext.Provider value={value}>
11      {children}
12    </ThemeContext.Provider>
13  );
14}

1// Dispatch is stable, only state changes cause re-renders
2const StateContext = createContext(null);
3const DispatchContext = createContext(null);
4
5function AppProvider({ children }) {
6  const [state, dispatch] = useReducer(reducer, initialState);
7
8  return (
9    <DispatchContext.Provider value={dispatch}>
10      <StateContext.Provider value={state}>
11        {children}
12      </StateContext.Provider>
13    </DispatchContext.Provider>
14  );
15}

1function useTheme() {
2  const { theme } = useContext(AppContext);
3  return theme;
4}
5
6// Component only re-renders when theme changes
7function Header() {
8  const theme = useTheme();
9  return <header className={theme}>...</header>;
10}