A Context **provider** makes a value available to components below it in the [React](/courses/reactjs) tree, while a **consumer** reads that value. ### Step 1: Create the Context ```jsx import { createContext } from "react"; const ThemeContext = createContext("light"); ``` The value passed to `createContext` is a fallback value used when no matching provider exists above the consuming component. ### Step 2: Provide a Value In modern [React](/courses/reactjs), you can provide context like this: ```jsx function App() { return ( ); } ``` Every component inside that provider can access: ```text dark ``` if it consumes `ThemeContext`. In React versions before React 19, the common syntax is: ```jsx ``` ### Step 3: Consume the Value Modern [function](/javascript/functions-in-javascript) components usually consume context with `useContext`: ```jsx import { useContext } from "react"; function Button() { const theme = useContext(ThemeContext); return ( ); } ``` ### How React Finds the Value React searches upward from the consuming component and uses the closest matching provider. Conceptually: ```text ThemeContext value="dark" │ ├── Header │ └── Dashboard └── Button ↓ useContext(ThemeContext) ↓ "dark" ``` The number of intermediate components does not matter. ### What Is Context.Consumer? React also has an older consumer API: ```jsx {(theme) => ( )} ``` It still exists, but new [function](/javascript/functions-in-javascript)-component code normally uses: ```jsx useContext(ThemeContext) ``` because it is simpler to read. ### What Happens Without a Provider? If there is no matching provider above the component: ```jsx const ThemeContext = createContext("light"); ``` then: ```jsx useContext(ThemeContext) ``` returns: ```text light ``` The default value is a fallback; it does not automatically change over time. ### Interview-Ready Answer A Context provider supplies a value to components below it, and consumers read that value. Modern function components normally consume context with `useContext`. React searches upward for the closest matching provider, falling back to the `createContext` default when none exists. `Context.Consumer` is an older alternative that is rarely needed in new function-component code.