Custom Hooks in React
15 questions · 12 min · Medium
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
Test your knowledge of React component lifecycle concepts and the useEffect Hook with 20 questions covering mounting, updating, unmounting, dependency arrays, cleanup functions, side effects, and effect execution.
- 20
- Questions
- 15 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
Context API in React
15 questions · 12 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 useEffect Hook in React?
- A. To create React components
- B. To perform side effects in function components
- C. To define CSS styles
- D. To create HTML elements
Show answer
B. To perform side effects in function components
useEffect is used to synchronize a component with external systems and perform side effects such as data fetching, subscriptions, and timers.
-
2. Which lifecycle phase occurs when a React component is first added to the DOM?
- A. Updating
- B. Unmounting
- C. Mounting
- D. Destroying
Show answer
C. Mounting
Mounting refers to the initial creation and insertion of a component into the DOM.
-
3. Which lifecycle phase occurs when a component's props or state change?
- A. Mounting
- B. Updating
- C. Unmounting
- D. Initializing
Show answer
B. Updating
A component enters the updating phase when changes to its props or state cause it to render again.
-
4. Which lifecycle phase occurs when a component is removed from the DOM?
- A. Mounting
- B. Rendering
- C. Updating
- D. Unmounting
Show answer
D. Unmounting
Unmounting occurs when React removes a component from the DOM.
-
5. What does an empty dependency array mean in useEffect?
- A. The effect runs after every render
- B. The effect does not run at all
- C. The effect runs after the initial render and does not re-run due to dependency changes
- D. The effect runs only when the component unmounts
Show answer
C. The effect runs after the initial render and does not re-run due to dependency changes
With an empty dependency array, the effect has no reactive dependencies, so it does not re-run when props or state change.
-
6. When does this effect run? useEffect(() => { console.log('Hello'); });
- A. Only during mounting
- B. Only during unmounting
- C. After every completed render
- D. Never
Show answer
C. After every completed render
When no dependency array is provided, the effect runs after every completed render.
-
7. What is the purpose of the dependency array in useEffect?
- A. To define CSS dependencies
- B. To control when the effect should re-run
- C. To create component props
- D. To prevent rendering
Show answer
B. To control when the effect should re-run
The dependency array tells React which reactive values the effect depends on and when the effect needs to synchronize again.
-
8. What does the cleanup function returned from useEffect typically handle?
- A. Creating JSX
- B. Starting a component
- C. Removing subscriptions, timers, or other external resources
- D. Changing component props
Show answer
C. Removing subscriptions, timers, or other external resources
Cleanup functions are commonly used to stop timers, unsubscribe from events, disconnect resources, or otherwise undo an effect.
-
9. Which syntax correctly returns a cleanup function from useEffect?
- A. useEffect(() => { return () => { /* cleanup */ }; }, []);
- B. useEffect(() => { cleanup(); }, []);
- C. useEffect(cleanup, []);
- D. useEffect(() => cleanup = true, []);
Show answer
A. useEffect(() => { return () => { /* cleanup */ }; }, []);
An effect can return a function, and React calls that function during cleanup.
-
10. When does React normally run an effect's cleanup function?
- A. Only before the first render
- B. Before the effect runs again and when the component unmounts
- C. Only when the browser closes
- D. Only after every state update
Show answer
B. Before the effect runs again and when the component unmounts
React runs the previous effect's cleanup before re-running that effect after dependencies change and when the component is removed.
-
11. Which of the following is a common use case for useEffect?
- A. Fetching data from an API
- B. Declaring a JavaScript variable
- C. Defining a function parameter
- D. Creating a CSS class
Show answer
A. Fetching data from an API
Data fetching is a common example of an external synchronization task that can be handled with useEffect.
-
12. Consider: useEffect(() => { console.log(count); }, [count]); When will the effect re-run?
- A. Only when the component unmounts
- B. Whenever count changes between renders
- C. Only when the browser reloads
- D. Never
Show answer
B. Whenever count changes between renders
Because count is listed as a dependency, React re-runs the effect when its value changes between renders.
-
13. What happens when a state update inside a component causes it to render again?
- A. The component enters the updating phase
- B. The component is automatically unmounted
- C. The component can never render again
- D. The component is permanently destroyed
Show answer
A. The component enters the updating phase
Changes to state can trigger a new render, which is part of the component's updating lifecycle.
-
14. Why should an effect that creates an event listener usually have a cleanup function?
- A. To prevent JSX from compiling
- B. To remove the listener when it is no longer needed
- C. To force the component to render twice
- D. To change the event name
Show answer
B. To remove the listener when it is no longer needed
Removing the event listener during cleanup prevents stale subscriptions and unnecessary listeners from accumulating.
-
15. Which statement about useEffect is correct?
- A. It can only be used in class components
- B. It is a React Hook used in function components
- C. It replaces JSX
- D. It is used only for styling
Show answer
B. It is a React Hook used in function components
useEffect is a Hook designed for function components to synchronize with external systems and perform side effects.
-
16. What is a potential problem with creating a timer in an effect without cleaning it up?
- A. The component becomes a class component
- B. The timer may continue running after it is no longer needed
- C. JSX automatically becomes invalid
- D. The browser deletes React
Show answer
B. The timer may continue running after it is no longer needed
Timers such as setInterval should generally be cleared during cleanup when the effect no longer needs them.
-
17. Which function can be used to stop an interval created with setInterval?
- A. stopInterval()
- B. removeInterval()
- C. clearInterval()
- D. deleteInterval()
Show answer
C. clearInterval()
clearInterval() cancels an interval previously created with setInterval().
-
18. In React development with Strict Mode, an effect may appear to run an extra time during initial development setup. What is one purpose of this behavior?
- A. To permanently disable effects
- B. To help reveal effects that are not properly resilient to setup and cleanup
- C. To convert function components into class components
- D. To prevent state updates
Show answer
B. To help reveal effects that are not properly resilient to setup and cleanup
React Strict Mode can perform an extra setup and cleanup cycle in development to help expose missing or incorrect cleanup logic.
-
19. Which of the following is generally NOT the purpose of useEffect?
- A. Synchronizing with an external system
- B. Setting up a subscription
- C. Performing a side effect
- D. Calculating a value directly from existing props and state
Show answer
D. Calculating a value directly from existing props and state
Values that can be calculated directly from props and state during rendering generally do not require an effect.
-
20. What is the main lifecycle sequence for a typical React component?
- A. Unmounting → Mounting → Updating
- B. Updating → Mounting → Unmounting
- C. Mounting → Updating → Unmounting
- D. Mounting → Unmounting → Updating
Show answer
C. Mounting → Updating → Unmounting
A component is typically mounted, may update multiple times as its inputs change, and eventually unmounts.