`useContext` is a [React Hook](/courses/reactjs) that lets a [function](/javascript/functions-in-javascript) component read and subscribe to a Context value. ### Basic Syntax ```jsx const value = useContext(SomeContext); ``` ### Example First create the context: ```jsx import { createContext } from "react"; const AuthContext = createContext(null); ``` Provide a value: ```jsx function App() { const user = { name: "Asif", role: "admin" }; return ( ); } ``` Then read it from a descendant: ```jsx import { useContext } from "react"; function Profile() { const user = useContext(AuthContext); return (

{user.name}

{user.role}

); } ``` ### useContext Reads the Closest Provider Suppose providers are nested: ```jsx

``` A component inside `Header` receives: ```text light ``` while a component inside `Dashboard` receives: ```text dark ``` because the inner provider is closer. ### Consumers Subscribe to Changes If the provider value changes: ```jsx const [theme, setTheme] = useState("light"); ``` and you provide: ```jsx ``` components using: ```jsx useContext(ThemeContext) ``` receive the latest context value when it changes. ### Provider Must Be Above the Consumer This does not provide context to the `useContext` call in the same component: ```jsx function Profile() { const theme = useContext(ThemeContext); return (

{theme}

); } ``` The provider must already be above the component that reads it. ### useContext Is Still a Hook It should normally be called at the top level of a [function](/javascript/functions-in-javascript) component or custom Hook: ```jsx const user = useContext(AuthContext); ``` not conditionally inside normal `if` logic. ### Interview-Ready Answer `useContext` reads and subscribes to the value from the closest matching Context provider above the component. When that provider's value changes, consuming components receive the updated value. If no provider exists, `useContext` returns the Context's default value.