Redux vs Context API in React
Compare Redux and the React Context API — performance, boilerplate, async support, and clear guidance on when to use each for state management in real apps.
Expected Interview Answer
The Context API is a built-in React tool for passing shared data down the tree without prop drilling, while Redux is a dedicated state-management library that adds a single predictable store, actions, reducers, middleware, and devtools for large, frequently-changing global state.
Context is ideal for low-frequency values like theme, locale, or the current user because it has zero dependencies and minimal boilerplate. However, any component consuming a Context re-renders whenever its value changes, which hurts performance for high-frequency updates. Redux (usually via Redux Toolkit) solves this with selector-based subscriptions so a component only re-renders when the exact slice it reads changes, plus middleware for async logic and time-travel debugging.
- Context: no extra dependency, minimal setup
- Context: perfect for theme, auth, and locale
- Redux: predictable single source of truth
- Redux: selector-based, fine-grained re-renders
- Redux: middleware and powerful devtools
- Redux Toolkit reduces classic Redux boilerplate
AI Mentor Explanation
Context is like the umpire's hand signals that the whole ground reads directly without a runner carrying messages between fielders. Redux is the official scorer's central logbook: every run, wicket, and over is an entry filed through one channel, so anyone can reconstruct the full match state precisely and audit exactly how each number changed.
Step-by-Step Explanation
Step 1
Assess update frequency
Rarely-changing global data (theme, auth) suits Context; frequently-changing shared state suits Redux.
Step 2
Check performance needs
Context re-renders all consumers on change; Redux selectors re-render only components reading the changed slice.
Step 3
Consider async and middleware
Redux offers middleware (thunks, sagas) and devtools; Context has no built-in async or debugging story.
Step 4
Weigh boilerplate
Context needs a provider and hook; Redux Toolkit adds a store, slices, and actions but removes most legacy boilerplate.
Step 5
Choose or combine
Many apps use both: Context for static config and Redux (or Zustand) for dynamic domain state.
What Interviewer Expects
- Context solves prop drilling, not global state management at scale
- Awareness that all Context consumers re-render on value change
- Redux provides selector-based subscriptions and predictable updates
- Knowledge of Redux Toolkit as the modern standard
- Ability to pick the right tool for a given scenario
Common Mistakes
- Claiming Context is a full state-management library like Redux
- Ignoring the re-render cost of a single large Context value
- Using raw legacy Redux instead of Redux Toolkit
- Reaching for Redux when Context or local state would do
- Forgetting that Context has no built-in async or middleware
Best Answer (HR Friendly)
“Context is React's built-in way to share simple data like the logged-in user or theme without passing it through every component. Redux is a separate library for managing large, fast-changing app-wide data in a predictable, easy-to-debug way. You pick Context for simple sharing and Redux when the state gets big and complex.”
Code Example
const ThemeContext = createContext('light')
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
}
function Toolbar() {
const theme = useContext(ThemeContext)
return <button className={theme}>Save</button>
}const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1 },
},
})
function Counter() {
const value = useSelector((s) => s.counter.value)
const dispatch = useDispatch()
return <button onClick={() => dispatch(counterSlice.actions.increment())}>{value}</button>
}Follow-up Questions
- Why can a single large Context value cause performance problems?
- How does useSelector avoid unnecessary re-renders?
- What problem does Redux middleware like thunk solve?
- When would you choose Zustand or Jotai over Redux?
- Can you use Context and Redux together in one app?
MCQ Practice
1. What is the main downside of putting frequently-changing state in a single React Context?
All components consuming a Context re-render whenever its value changes, which is costly for high-frequency updates.
2. Which feature is provided by Redux but NOT by the Context API out of the box?
Redux ships middleware (thunks/sagas) and time-travel devtools; Context only shares a value down the tree.
3. What is the recommended modern way to write Redux logic?
Redux Toolkit is the official, recommended approach; it reduces boilerplate with createSlice and configureStore.
Flash Cards
Is Context API a state-management library? — No — it is a dependency-injection mechanism for passing shared values down the tree without prop drilling.
Why does Redux scale better for large state? — Selectors give fine-grained subscriptions, so components re-render only when their exact slice changes.
Best use case for Context? — Low-frequency global data like theme, locale, or the authenticated user.
What does Redux Toolkit add? — createSlice, configureStore, Immer-based immutable updates, and less boilerplate than classic Redux.