Context can share state by storing the actual state in a parent component and providing both the current value and the operations needed to update it. ### Example: Shared Theme State Create a context: ```jsx import { createContext } from "react"; const ThemeContext = createContext(null); ``` Create the state in a provider component: ```jsx import { useState } from "react"; function ThemeProvider({ children }) { const [theme, setTheme] = useState("light"); function toggleTheme() { setTheme((theme) => theme === "light" ? "dark" : "light" ); } return ( {children} ); } ``` Now wrap the relevant part of the application: ```jsx function App() { return ( ); } ``` A descendant can read the state and trigger an update: ```jsx function ThemeButton() { const { theme, toggleTheme } = useContext(ThemeContext); return ( ); } ``` ### Where Does the State Actually Live? The state still belongs to: ```jsx ThemeProvider ``` because that component contains: ```jsx useState(...) ``` Context only distributes access to it. Conceptually: ```text ThemeProvider │ ├── useState owns theme ├── provides theme ├── provides toggleTheme │ └── descendants ↓ useContext ↓ read theme + request updates ``` ### Shared Authentication Example The same pattern can be used for authentication: ```jsx {children} ``` Consumers can then read: ```jsx const { user, logout } = useContext(AuthContext); ``` ### Context Does Not Make State Truly Global Only components inside the provider can access that provided value. This means you can intentionally limit the scope: ```jsx ``` `MarketingPage` does not automatically receive that provider's value. ### Interview-Ready Answer To share state with Context, keep the state in a parent or provider component and pass the current value and update [functions](/javascript/functions-in-javascript) through Context. Descendants read them with `useContext`. Context distributes access to the state, but the component containing `useState` or another state mechanism remains the actual owner of that state.