For mid-level and senior React roles, state management is where interviews go deep. It is not enough to know how Context and useReducer work. You also need to know when they cause re-renders and when a library is the better pick. This set covers how Context behaves and performs, useReducer, lifting state up, Redux Toolkit and useSelector, and the difference between client state and server state.
How to practise: read each question and tap the option you think is correct. You will see right away whether you got it, along with a short explanation, and your score is tracked at the bottom of the screen. This set has 15 questions.
Topics covered in this set
- How Context propagates updates to consumers
- Avoiding unnecessary re-renders with Context
- useReducer, dispatch and lazy initialisation
- Prop drilling and lifting state up
- Redux Toolkit, Immer and useSelector
- Client state vs server state
React MCQs with answers and explanations
Q1. When the value of a Context Provider changes, which components re-render?
a) Only the Provider itself
b) Every component in the app
c) All components that read that context with useContext, even if they are wrapped in React.memo
d) Only direct children of the Provider
Q2. What is the problem with this Provider?
function App() {
const [user, setUser] = useState(null);
return (
<UserContext.Provider value={{ user, setUser }}>
<Page />
</UserContext.Provider>
);
}a) setUser cannot be passed through context
b) A new value object is created on every render of App, so all consumers re-render even when user has not changed
c) Context values must be primitives
d) There is no problem
Q3. What does useContext(MyContext) return if there is no matching Provider above the component?
a) The default value passed to createContext
b) undefined always
c) null
d) It throws an error
Q4. Which statement about a reducer function used with useReducer is correct?
a) It can call APIs and update state when they respond
b) It should mutate the state object directly for performance
c) It must return undefined for unknown actions
d) It must be pure: given the same state and action it returns the same new state with no side effects
Q5. What is true about the dispatch function returned by useReducer?
a) It has a stable identity across re-renders
b) It changes on every render
c) It changes whenever state changes
d) It can only be called inside useEffect
Q6. What does clicking the button do, assuming count starts at 0?
function reducer(state, action) {
if (action.type === 'inc') return { count: state.count + 1 };
return state;
}
// inside the component
const [state, dispatch] = useReducer(reducer, { count: 0 });
<button onClick={() => {
dispatch({ type: 'inc' });
dispatch({ type: 'inc' });
}}>+</button>a) count becomes 1
b) count becomes 2
c) count stays 0
d) An error is thrown
Q7. A reducer mutates state.count directly and returns the same state object. What happens?
a) The component re-renders with the new count
b) React throws an error
c) React may skip the re-render because the returned state is the same reference
d) The state is reset to its initial value
Q8. What is the purpose of the third argument in useReducer(reducer, initialArg, init)?
a) To provide middleware
b) To set a debounce time
c) To subscribe to context
d) To lazily compute the initial state by calling init(initialArg) only on the first render
Q9. When is useReducer usually a better choice than useState?
a) When state is a single boolean
b) When state has several related values and many different ways of updating them
c) When the component has no state
d) When you need to fetch data
Q10. Why do some apps put state and dispatch in two separate contexts?
a) Components that only dispatch actions do not re-render when the state changes
b) React does not allow functions in context
c) It makes the reducer run faster
d) It is required by React 19
Q11. What is prop drilling?
a) Passing props to a component using the spread operator
b) Validating props with PropTypes
c) Passing data through several intermediate components that do not use it, just so a deeply nested child can receive it
d) Mutating props inside a child
Q12. Two sibling components need to share and update the same state. What is the standard React approach?
a) Use a global variable
b) Use refs to read each other's state
c) Duplicate the state in both and keep it in sync with useEffect
d) Lift the state up to their closest common parent and pass it down as props
Q13. Why can reducers written with Redux Toolkit's createSlice appear to mutate state, for example state.items.push(item)?
a) Redux Toolkit uses Immer, which records the changes on a draft and produces a new immutable state
b) Redux no longer requires immutability
c) createSlice deep-clones the whole store on every action
d) Mutations are only allowed in development mode
Q14. When does a component using Redux's useSelector re-render after an action is dispatched?
a) After every dispatched action
b) Only when the value returned by the selector is different by strict reference (===) from the previous one
c) Only when its parent re-renders
d) Never; it must subscribe manually
Q15. Data fetched from an API (lists, user profiles and so on) is best managed with which kind of tool in a large React app?
a) A large Context holding all API responses
b) useReducer in the root component
c) A server-state library such as TanStack Query or RTK Query that handles caching, refetching and invalidation
d) localStorage
Quick revision notes
- All useContext consumers re-render when the Provider value changes; React.memo does not prevent this.
- Memoise object values given to a Provider with useMemo. Keep data that changes often and data that rarely changes in separate contexts.
- Reducers must be pure and return new objects. Returning the same reference may skip the re-render.
- dispatch is stable. Two dispatches in one handler both apply, because each one sees the latest state.
- Lift state to the closest common parent first; use context or a store only when passing props becomes painful.
- useSelector re-renders when the selected value changes by reference; memoise derived data with createSelector.
Frequently asked questions
Can the Context API replace Redux?
For global data that rarely changes, like theme, language or the logged-in user, yes. For big state that changes often and is read in many places, Redux Toolkit or Zustand usually does better, because each component listens only to the slice it needs, not the whole context value.
Why does my component re-render even though I wrapped it in React.memo?
Usually one of two things: it reads a context whose value changed, or its parent passes a new object, array or function on every render. Memoise those props with useMemo and useCallback, and check which context values the component reads.
Should I use useState or useReducer?
Use useState for simple values that do not depend on each other. Move to useReducer when several values change together, when updates depend on the previous state in many ways, or when you want to test the update logic on its own.
Comments
Post a Comment