Real World Example

Apps like YouTube or Swiggy let you switch theme or language once and every page follows. The setting lives in context; any component reads it.

const SettingsContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');
  const [lang, setLang] = useState('en');
  return (
    <SettingsContext.Provider value={{ theme, setTheme, lang, setLang }}>
      <Navbar />
      <Routes>...</Routes>
    </SettingsContext.Provider>
  );
}

function Navbar() {
  const { theme, setTheme } = useContext(SettingsContext);
  return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Theme: {theme}</button>;
}