What is the purpose of the `useContext` hook in React?

The useContext hook allows functional components to access the data provided by a Context.

1
It avoids the need to pass props through multiple levels of components to share data that is needed by many components.
2
useContext is a React Hook that lets you read and subscribe to context from your component.
3
Passing data deeply into the tree it solves the issue of prop drilling

javascript

Difficulty: 5/10

Topics: Context API, state sharing, performance

0-2 years experience

1
We have a ThemeContext that provides 'dark' or 'light'. How would you use useContext inside a Button component to apply the correct CSS class?
2
If you forget to wrap a component tree with the corresponding Provider, what does useContext return?
3
Can you show a minimal example of creating a LanguageContext and consuming it with useContext in a functional component?

2-5 years experience

1
Our feature‑toggle context was updated with a new flag, but the UI isn’t reflecting the change. Walk me through how you would debug this issue.
2
We need to share a WebSocket connection across many components via context. How would you structure the provider and consumers, and what trade‑offs should you consider?
3
A form component reads and writes shared form state through context. How would you prevent unrelated fields from re‑rendering when only one field changes?

5-8 years experience

1
In a dashboard with dozens of widgets reading from a global SettingsContext, users notice lag when a single setting changes. How would you redesign the context usage to improve performance?
2
We have nested contexts for Auth, Theme, and Locale. How do you decide the order of Providers, and what impact does that order have on useContext consumers?
3
A legacy class component needs a value from a context used in a functional component tree. How would you bridge that gap without refactoring the entire tree?

8+ years experience

1
Our monolith is being split into micro‑frontends, each with its own context but also needing shared authentication state. How would you design a cross‑micro‑frontend context strategy and what pitfalls would you watch for?
2
A shared component library relies on a global context that is being deprecated. How would you plan the migration to a new context or state‑management approach while minimizing breaking changes for downstream teams?
3
When scaling to thousands of concurrent users, how does useContext interact with server‑side rendering and hydration, and what patterns can mitigate any performance or consistency issues?

❓What are common pitfalls when the context value is a mutable object?
❓How does React decide when a component that uses useContext should re‑render?
❓When might you choose a different state‑sharing solution like Redux over useContext?