React State Management 3 — Questions and Answers
Question 1: What problem does the Context API primarily solve?
- Slow rendering performance
- Prop drilling through many component levels (Correct answer)
- Server-side rendering
- CSS styling conflicts
Correct answer: Prop drilling through many component levels
Context lets you share values without passing props through every level.
Question 2: Which component makes a context value available to its descendants?
- Context.Consumer
- Context.Provider (Correct answer)
- useContext
- Context.Render
Correct answer: Context.Provider
The Provider supplies the value to all components beneath it.
Question 3: What is the modern hook for reading a context value in a function component?
- useState
- useContext (Correct answer)
- useReducer
- useMemo
Correct answer: useContext
useContext reads the current value of a given context.
Question 4: When a context value changes, what happens to components that consume it?
- Nothing re-renders
- All consuming components re-render (Correct answer)
- Only the Provider re-renders
- The page reloads
Correct answer: All consuming components re-render
Every consumer of the context re-renders when its value changes.
Question 5: Why can putting an object literal directly in a Provider's value prop hurt performance?
- Objects can't be context values
- A new object reference each render forces consumers to re-render (Correct answer)
- It throws a TypeError
- Context only accepts strings
Correct answer: A new object reference each render forces consumers to re-render
A fresh object reference on every render makes consumers re-render unnecessarily.
Question 6: What value does a consumer receive if no matching Provider is found above it?
- null always
- The default value passed to createContext (Correct answer)
- An error is thrown
- An empty object
Correct answer: The default value passed to createContext
Without a Provider, the default value from createContext is used.
Question 7: For very high-frequency updates shared widely, why might Context be a poor fit?
- It cannot store numbers
- It can cause broad re-renders across many consumers (Correct answer)
- It only works in class components
- It requires Redux
Correct answer: It can cause broad re-renders across many consumers
Frequent context changes re-render all consumers, which can be costly.
React State Management 3
What problem does the Context API primarily solve?