What will be the output of this code? JavaScript useEffect(() => { console.log('Component Mounted'); }, []);

"Component Mounted" will be logged once when the component mounts

"Component Mounted" will be logged every time the component updates

"Component Mounted" will be logged every time the component unmounts

Is this the correct syntax to use useEffect with cleanup? JavaScript useEffect(() => { const timer = setTimeout(() => console.log("Hello!"), 1000); return () => clearTimeout(timer); }, []);

The clearTimeout should be inside a try-catch block

The return function should return a promise

The setTimeout should be inside a useState hook

Earn Google Badge

Full Stack Dev CourseExplore

React Hooks

Last Updated :

Discuss

Comments

Question 1

Which situation will NOT trigger the cleanup function of a useEffect hook?

A
During the initial render
B
On every render, including the initial render
C
When the component is unmounted
D
When specified dependencies change

Question 2

when does the useEffect function execute?

A
Only on the initial render
B
On every render, including the initial render
C
Only when the count state changes
D
Only when the input state changes

Question 3

What happens if the dependency array is removed in the useEffect hook?

A
The useEffect function executes only on the initial render
B
The useEffect function executes on every render, including the initial render
C
The useEffect function does not execute at all
D
An error occurs

Question 4

If you call setCount(count + 1) twice in a row, what will count become?

A
Increased by 1
B
Increased by 2
C
Same as before
D
Random behavior

Question 5

Which approach ensures setCount increments correctly when called multiple times in one render?

A
setCount(count + 1)
B
setCount(prev => prev + 1)
C
setCount(() => count + 2)
D
setCount(count++)

Question 6

What will be the output of this code?

JavaScript

useEffect(() => {
    console.log('Component Mounted');
}, []);

A
"Component Mounted" will be logged every time the component updates
B
"Component Mounted" will be logged once when the component mounts
C
"Component Mounted" will be logged every time the component unmounts
D
The code will cause an error

Question 7

Is this the correct syntax to use useEffect with cleanup?

JavaScript

useEffect(() => {
    const timer = setTimeout(() => console.log("Hello!"), 1000);
    return () => clearTimeout(timer);
}, []);

A
This is correct syntax
B
The clearTimeout should be inside a try-catch block
C
The return function should return a promise
D
The setTimeout should be inside a useState hook

Question 8

What is the correct way to update a state variable inside useEffect?

JavaScript

const [count, setCount] = useState(0);
useEffect(() => {
    setCount(count + 1);
}, [count]);

A
The code will work, and count will increment infinitely
B
The code will cause an error
C
The code will increment count once
D
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?

A
Use useEffect to call fetch() inside it, then update the state
B
Use useEffect and useState for updating the state after an API call
C
Use only useState to handle API calls
D
Both A and B

Question 10

Is this the correct way to update a state variable inside useEffect?

JavaScript

const [count, setCount] = useState(0);
useEffect(() => {
    setCount(count + 1);
}, [count]);

A
The code will work, and count will increment infinitely
B
The code will cause an error
C
The code will increment count once
D
The code is correct, and count will be updated only when it changes

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion