`useContext` is a [React Hook](/courses/reactjs) that lets a component read and subscribe to a value provided by a context higher in the component tree. It is useful when data needs to be available to many nested components without manually forwarding the same prop through every intermediate level. ### Without Context Imagine: ```text App ↓ theme Layout ↓ theme Sidebar ↓ theme Button ``` `Layout` and `Sidebar` may not even need the theme. They only pass it along. This is a form of prop drilling. ### Create a Context ```jsx import { createContext } from "react"; const ThemeContext = createContext("light"); ``` ### Provide the Value The traditional provider syntax is: ```jsx function App() { return ( ); } ``` In modern [React](/courses/reactjs) 19, a context can also be rendered directly as a provider: ```jsx ``` ### Read Context with useContext A deeply nested component can read it directly: ```jsx import { useContext } from "react"; function Button() { const theme = useContext(ThemeContext); return ( ); } ``` [React](/courses/reactjs) looks upward in the component tree for the closest matching provider. ### Context Values Can Change Context can contain state: ```jsx function App() { const [theme, setTheme] = useState("light"); return ( ); } ``` Components reading that context receive the updated value when it changes. ### Context Is Not Automatically a Replacement for Props Props are often simpler for nearby component relationships: ```jsx ``` Context is most useful for values that many distant descendants genuinely need. Examples include: ```text Theme Authenticated user Locale Feature configuration Shared application settings ``` ### Performance Consideration Components reading a context re-render when the relevant provided value changes. So large frequently changing context values can cause broader updates than necessary. You can often split unrelated concerns into separate contexts rather than putting everything into one huge context object. ### Interview-Ready Answer `useContext` reads and subscribes to the nearest value supplied by a React context provider. It helps avoid excessive prop drilling when widely shared values such as theme, authentication, or locale are needed deep in the tree. Context should be used for genuinely shared data rather than as a replacement for every prop.