When do I use Context, useReducer or a custom hook?
Try code in the playgroundUnderstand the concept
Context shares a value with descendants without passing it through every intermediate component. useReducer organizes state changes through actions and a reducer, while custom hooks extract reusable stateful logic. These tools address distribution, transition structure and reuse respectively; they are not interchangeable state stores.
Important ideas
-
Context shares values across a component tree; changed values update consumers.
-
useReducer groups related state changes into explicit actions.
-
A custom hook reuses logic; separate calls do not automatically share state.
-
A new Context provider value can update consumers; separate unrelated contexts when broad updates become expensive.
Can you explain it without the notes?
When do I use Context, useReducer or a custom hook?
Use your own words. Explain an example and one limitation before checking the explanation.
Check your explanation
Context shares a value with descendants without passing it through every intermediate component. useReducer organizes state changes through actions and a reducer, while custom hooks extract reusable stateful logic. These tools address distribution, transition structure and reuse respectively; they are not interchangeable state stores.
Turn this concept into a clear answer.
- Two components calling the same custom hook get separate state unless the hook explicitly connects them to shared storage.
Adapted from 06_REACT_NEXTJS.md · “When do I use Context, useReducer or a custom hook?”. Examples are study fragments; framework behavior can depend on your version.