React Hooks
This quiz covers key concepts of React Hooks, including an introduction to React Hooks, using useEffect for handling side effects, and managing cleanup within useEffect.
Last Updated :
Discuss
Comments
Question 1
When does the cleanup function returned by the useEffect hook get executed?
During the initial render
On every render, including the initial render
When the component is unmounted
When specified dependencies change
Question 2
when does the useEffect function execute?
Only on the initial render
On every render, including the initial render
Only when the count state changes
Only when the input state changes
Question 3
What happens if the dependency array is removed in the useEffect hook?
The useEffect function executes only on the initial render
The useEffect function executes on every render, including the initial render
The useEffect function does not execute at all
An error occurs
Question 4
If you call setCount(count + 1) twice in a row, what will count become?
Increased by 1
Increased by 2
Same as before
Random behavior
Question 5
Which approach ensures setCount increments correctly when called multiple times in one render?
setCount(count + 1)setCount(prev => prev + 1)
setCount(() => count + 2)setCount(count++)
Question 6
What will be the output of this code?
useEffect(() => {
console.log('Component Mounted');
}, []);
"Component Mounted" will be logged every time the component updates
"Component Mounted" will be logged once when the component mounts
"Component Mounted" will be logged every time the component unmounts
The code will cause an error
Question 7
Is this the correct syntax to use useEffect with cleanup?
useEffect(() => {
const timer = setTimeout(() => console.log("Hello!"), 1000);
return () => clearTimeout(timer);
}, []);
This is correct syntax
The clearTimeout should be inside a try-catch block
The return function should return a promise
The setTimeout should be inside a useState hook
Question 8
What is the correct way to update a state variable inside useEffect?
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1);
}, [count]);
The code will work, and count will increment infinitely
The code will cause an error
The code will increment count once
The code is correct, and count will be updated only when it changes
Question 9
How would you use useEffect to fetch data from an API when the component mounts and display it?
Use useEffect to call fetch() inside it, then update the state
Use useEffect and useState for updating the state after an API call
Use only useState to handle API calls
Both A and B
Question 10
Is this the correct way to update a state variable inside useEffect?
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1);
}, [count]);
The code will work, and count will increment infinitely
The code will cause an error
The code will increment count once
The code is correct, and count will be updated only when it changes
There are 10 questions to complete.
Take a part in the ongoing discussion
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy