What does `useContext()` do?

ReactMiddle~2 min read

What `useContext()` does

The useContext() hook lets you read a value from React context that was passed down through a <Context.Provider> component somewhere higher up the tree.

More simply: useContext lets a component reach shared data without passing it through props.

How it works (step by step)

1. Create a context

javascript

import { createContext } from "react";

export const ThemeContext = createContext("light");

createContext() creates a context object with a .Provider and a .Consumer method.

2. Wrap part of the app in a `Provider`

javascript

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Everything inside <ThemeContext.Provider> gets access to the value "dark".

3. Read the context value in any nested component through `useContext`

javascript

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Button() {
  const theme = useContext(ThemeContext);

  return <button className={theme}>Theme: {theme}</button>;
}

Now Button knows which theme is selected (dark), even though nobody explicitly passed it that prop!

Example using state

Context is often combined with state to pass dynamic data (for example, theme, language, or the user).

javascript

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle theme (current: {theme})
    </button>
  );
}

Now any number of components can read and change the theme, without threading props through every level.

When to use `useContext`

When	Why
Data is needed in many components	For example, the current user, language, theme, settings
You do not want to pass props by hand	`useContext` removes "prop drilling"
You need a global "state" without Redux or Zustand	Context + `useState` = simple global logic

Important to know

Feature	Explanation
`useContext` re-renders a component when the context value changes	If `value` changed, every subscriber re-renders
Context is not cached like `useMemo`	Updates are delivered synchronously
Context cannot be called outside a `Provider`	Otherwise the value comes from `createContext(defaultValue)`
Contexts can be nested	React merges them correctly

Difference from props

Props	useContext
Passed top-down manually	Automatically available to all descendants
Work locally	Work globally within the `Provider`
More flexible and transparent	More convenient for global data

Summary

Question	Answer
What does `useContext()` do	Lets you access the value from the nearest `Context.Provider`
When to use it	When components need to share common data without props
What it returns	The current context value
Usage examples	Theme, language, user, settings, authentication state

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.