Custom Hooks in React
15 questions · 12 min · Medium
Context API in React
Test your knowledge of the React Context API, including createContext, Provider, useContext, consuming context, default values, and sharing data across components.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Conditional Rendering in React
15 questions · 12 min · Medium
Components & Props in React Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Lists and Keys in ReactJS Quiz
15 questions · 12 min · Medium
State Management and useState Quiz in ReactJS
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What is the primary purpose of the React Context API?
- A. To share data across components without passing props through every intermediate component
- B. To replace JSX
- C. To create CSS styles
- D. To make every component global
Show answer
A. To share data across components without passing props through every intermediate component
Context provides a way to make values available to components deeper in the tree without manually passing props through each level.
-
2. Which React API is used to create a context?
- A. createContext
- B. makeContext
- C. createProvider
- D. useContextOnly
Show answer
A. createContext
React's createContext API creates a context object that can provide a value to descendant components.
-
3. Which hook is commonly used to consume a context value in a function component?
- A. useContext
- B. useProvider
- C. useStateContext
- D. useValue
Show answer
A. useContext
The useContext hook reads and subscribes to a context value from the nearest matching provider.
-
4. How is a context value commonly provided to descendant components?
- A. Using the context provider
- B. Using only useState
- C. Using a CSS class
- D. Using document.querySelector
Show answer
A. Using the context provider
A provider makes a context value available to components below it in the component tree.
-
5. Which property was traditionally used to pass a value through a Context Provider?
- A. value
- B. data
- C. contextValue
- D. state
Show answer
A. value
The traditional Context Provider API uses the value prop to specify the context value supplied to descendants.
-
6. What does useContext(MyContext) return?
- A. The current value of MyContext from the nearest matching provider
- B. A new React component
- C. The context provider itself
- D. A new state variable
Show answer
A. The current value of MyContext from the nearest matching provider
useContext reads the value from the nearest corresponding provider above the component in the tree.
-
7. What happens if a component uses useContext() but there is no matching provider above it?
- A. The context's default value is used
- B. React always throws an error
- C. The application automatically creates a provider
- D. The component is removed
Show answer
A. The context's default value is used
If no matching provider exists above the component, useContext returns the default value supplied when the context was created.
-
8. Which code correctly creates a context with a default value of "light"?
- A. const ThemeContext = createContext("light");
- B. const ThemeContext = new Context("light");
- C. const ThemeContext = useContext("light");
- D. const ThemeContext = createProvider("light");
Show answer
A. const ThemeContext = createContext("light");
createContext accepts a default value and returns a context object.
-
9. Which type of data is commonly shared using React Context?
- A. Theme, locale, or authenticated user information
- B. Only CSS files
- C. Only database tables
- D. Only component HTML
Show answer
A. Theme, locale, or authenticated user information
Context is commonly useful for cross-cutting data such as themes, localization settings, and authenticated user information.
-
10. Can a Context Provider supply an object containing multiple values?
- A. Yes
- B. No
- C. Only strings can be provided
- D. Only numbers can be provided
Show answer
A. Yes
A context value can be any JavaScript value, including objects containing state, functions, or other data.
-
11. What can happen to consumers when the context value provided by a provider changes?
- A. Consumers using that context can re-render
- B. All components in the application are always destroyed
- C. The provider is automatically removed
- D. The browser reloads automatically
Show answer
A. Consumers using that context can re-render
When a provider's context value changes, components that consume that context can be updated and re-rendered.
-
12. Which statement about React Context is correct?
- A. Context can help avoid prop drilling for shared values
- B. Context makes all state global automatically
- C. Context can only store strings
- D. Context can only be used in class components
Show answer
A. Context can help avoid prop drilling for shared values
Context provides a way to share values with deeply nested components without explicitly passing those values through every intermediate component.
-
13. Which approach can be used to update state stored in a Context?
- A. Provide state and an update function through the context value
- B. Context automatically modifies state without any function
- C. Only CSS can update context
- D. The browser must be refreshed
Show answer
A. Provide state and an update function through the context value
A provider can combine state with functions such as setters or dispatch functions and expose them through the context value.
-
14. What is a potential performance consideration when using Context?
- A. Changes to a context value can cause consuming components to re-render
- B. Context always prevents re-renders
- C. Context disables React reconciliation
- D. Context automatically memoizes every component
Show answer
A. Changes to a context value can cause consuming components to re-render
When a context value changes, components that consume that context may re-render, so context values should be structured carefully when performance matters.
-
15. Which statement best describes the React Context API?
- A. It provides a mechanism for passing shared values through a component tree without manually passing props at every level
- B. It is a replacement for all state management techniques
- C. It is used only for API requests
- D. It prevents components from receiving props
Show answer
A. It provides a mechanism for passing shared values through a component tree without manually passing props at every level
The Context API is designed for sharing values across a component tree, particularly when passing props through many intermediate components would be inconvenient.