[React](/courses/reactjs) Context can make a value available to many descendant components without manually passing it through every intermediate component. Context itself does not create state. A common pattern is to combine Context with `useState` or `useReducer`. ### Example: Authentication State Create a context: ```jsx import { createContext, useContext, useState } from "react"; const AuthContext = createContext(null); ``` Create a provider that owns the state: ```jsx function AuthProvider({ children }) { const [user, setUser] = useState(null); function login(userData) { setUser(userData); } function logout() { setUser(null); } return ( {children} ); } ``` Then wrap the part of the application that needs access: ```jsx function App() { return ( ); } ``` A nested component can read it: ```jsx function Profile() { const { user, logout } = useContext(AuthContext); if (!user) { return

Not signed in

; } return (

{user.name}

); } ``` ### Where Does the State Live? The actual state still belongs to: ```text AuthProvider ``` because it contains: ```jsx useState(...) ``` Context distributes access to that state. Conceptually: ```text AuthProvider ├── owns user state ├── owns login/logout logic │ └── Context distributes them ↓ Navbar Profile Settings Dashboard ``` ### When Context Works Well Context is often appropriate for values such as: ```text Theme Authentication Locale Permissions Application configuration Relatively stable shared state ``` ### Context Has Tradeoffs If one large Context contains many frequently changing values, consumers can re-render when its provided value changes. For example, avoid automatically creating one enormous object containing every application state value: ```text AppContext ├── user ├── theme ├── search text ├── notifications ├── editor state ├── cart └── filters ``` Splitting unrelated concerns can make state ownership and updates clearer. ### Context vs Dedicated State Libraries Context can be sufficient for simple shared state. As state becomes larger, more frequently updated, or requires more sophisticated update logic and subscriptions, a library such as [Redux Toolkit](/reactjs/chapter-22-redux-toolkit) or Zustand may provide a more structured or convenient approach. ### Interview-Ready Answer [React](/courses/reactjs) Context can be used for shared state by keeping the actual state in a provider component and exposing the current value and update [functions](/javascript/functions-in-javascript) through Context. It is suitable for values such as authentication, theme, and permissions, but large or frequently changing application state may benefit from a dedicated state-management solution.