🔹MCQs Of Class 11Conditional useEffect and Cleanup
1.
What
does an empty dependency array [] in useEffect signify?
A) Run effect on every render
B) Run effect only once after initial render
C) Run effect when a specific state changes
D) Prevents effect from running ever
Answer: B
2.
Which
of these causes useEffect to run after every render?
A) []
B) [stateVar]
C) No dependency array
D) [null]
Answer: C
3.
When
does useEffect run if its dependency array is [count]?
A) On mount only
B) When count changes
C) On every render
D) Never
Answer: B
4.
What
is the purpose of the cleanup function returned inside useEffect?
A) To run the effect only once
B) To reset states
C) To clean resources or side effects when component unmounts or before effect
re-runs
D) To prevent re-rendering
Answer: C
5.
Which
React hook is primarily used for side effects like data fetching or
subscriptions?
A) useState
B) useEffect
C) useContext
D) useRef
Answer: B
6.
What
will happen if you forget to cleanup a timer set inside useEffect?
A) Nothing
B) Memory leak or unexpected behavior
C) Component will never unmount
D) Timer will clear automatically
Answer: B
7.
How
do you cancel a setInterval timer inside useEffect?
A) Call clearTimeout
B) Call clearInterval in cleanup function
C) Return nothing
D) Use useState
Answer: B
8.
What
does the following dependency array mean? [userId, page]
A) Effect runs only once
B) Effect runs when either userId or page changes
C) Effect runs when both userId and page change simultaneously
D) Effect never runs
Answer: B
9.
What
does this code do?
js
CopyEdit
useEffect(() => {
console.log('Hello');
}, []);
A)
Logs "Hello" on every render
B) Logs "Hello" only once on mount
C) Logs "Hello" on unmount
D) Never logs
Answer: B
10.
In
which case should you add a cleanup function inside useEffect?
A) When effect causes side effects like timers or event listeners
B) When fetching data only once
C) When setting state inside useEffect
D) Always, no matter what
Answer: A
11.
Which
of these is a common use case for cleanup in useEffect?
A) Fetching API data
B) Removing event listeners
C) Rendering JSX
D) Updating state
Answer: B
12.
What
will happen if you pass no dependency array to useEffect?
A) Runs once on mount
B) Runs after every render
C) Runs only on unmount
D) Never runs
Answer: B
13.
What
problem does the isMounted flag solve in async data fetching inside useEffect?
A) Prevents fetching data
B) Prevents setting state after unmount
C) Runs effect only once
D) Runs cleanup twice
Answer: B
14.
Which
of the following is the correct way to add a window resize event listener and
clean it up?
A) Add in useEffect, remove in cleanup function
B) Add in render function
C) Add in cleanup function
D) Add in constructor
Answer: A
15.
What
does the cleanup function in useEffect execute?
A) After the component renders
B) Before the component unmounts or before the next effect runs
C) Only on unmount
D) Before the first render
Answer: B
16.
What
does this effect do?
js
CopyEdit
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
A)
Changes title once on mount
B) Changes document title on every render
C) Changes title whenever count changes
D) Does nothing
Answer: C
17.
How
can you trigger a re-fetch of data inside a useEffect?
A) Change a state variable that is in the dependency array
B) Use setInterval
C) Pass empty dependency array
D) Use useRef
Answer: A
18.
Which
hook allows you to maintain values across renders without causing re-render?
A) useEffect
B) useRef
C) useState
D) useContext
Answer: B
19.
What
is the default behavior of useEffect if the cleanup function is not returned?
A) No cleanup occurs
B) Cleanup runs on unmount automatically
C) React throws an error
D) Cleanup runs on every render
Answer: A
20.
Which
of the following can cause infinite loops in useEffect?
A) Empty dependency array
B) Updating a state inside the effect without proper dependencies
C) Returning cleanup function
D) Using useRef
Answer: B
21.
What
is the recommended way to fetch data on component mount?
A) Use useEffect with empty dependency array
B) Use useState only
C) Use class lifecycle methods only
D) Use useEffect with no dependency array
Answer: A
22.
What
happens if you forget to include a dependency in the useEffect array?
A) Effect might not run when that dependency changes
B) Infinite loop
C) React throws an error
D) No effect at all
Answer: A
23.
Which
is the correct way to cancel an ongoing fetch request in useEffect cleanup?
A) Use AbortController and abort fetch in cleanup
B) Use clearInterval
C) Set state to null
D) Use useRef
Answer: A
24.
In
the context of useEffect, what does "dependency" mean?
A) A variable or state the effect depends on to rerun
B) The props of the component
C) The children of the component
D) The return value of the effect
Answer: A
25.
Which
of these is NOT a correct use of the dependency array?
A) [count] to run on count change
B) [] to run once
C) Omitting it to run every render
D) [fetchData()] to call a function inside dependency array
Answer: D
26.
Why
is it important to clean up event listeners in useEffect?
A) To prevent memory leaks
B) To improve performance
C) To prevent multiple event bindings
D) All of the above
Answer: D
27.
What
does this effect do?
js
CopyEdit
useEffect(() => {
return () => {
console.log('Cleanup');
};
}, []);
A)
Logs "Cleanup" after every render
B) Logs "Cleanup" on unmount only
C) Logs "Cleanup" on mount
D) Logs "Cleanup" never
Answer: B
28.
How
do you fetch new data on a button click using useEffect?
A) Update a state and include it in dependency array
B) Call useEffect directly
C) Use useState only
D) Use setTimeout
Answer: A
29.
Which
lifecycle method in class components corresponds to useEffect with empty
dependency array?
A) componentDidMount
B) componentDidUpdate
C) componentWillUnmount
D) shouldComponentUpdate
Answer: A
30.
What
happens if you pass a function directly inside the dependency array?
A) Effect runs on every render (because functions are recreated)
B) Effect runs once
C) Effect never runs
D) React throws error
Answer: A
31.
What
happens if you have an effect that sets state but forget to include that state
in the dependency array?
A) May cause stale closures or bugs
B) Effect runs infinitely
C) State does not update
D) React throws error
Answer: A
32.
Which
hook should you use to store mutable variables that don't trigger re-render?
A) useState
B) useEffect
C) useRef
D) useCallback
Answer: C
33.
Why
should you avoid directly modifying DOM inside useEffect without cleanup?
A) Because React controls the DOM
B) It can cause memory leaks
C) It might cause inconsistent UI
D) All of the above
Answer: D
34.
If
an effect fetches data and depends on a userId prop, what should the dependency
array be?
A) [userId]
B) []
C) No dependency array
D) [fetchData]
Answer: A
35.
Which
statement about cleanup function is true?
A) It runs before next effect and on unmount
B) It runs only once
C) It runs after every render
D) It runs before first render
Answer: A
36.
Which
of the following is a best practice when fetching data in useEffect?
A) Handle errors and loading states
B) Avoid updating state if component unmounts
C) Use cleanup to cancel fetch if possible
D) All of the above
Answer: D
37.
What
does the following do?
js
CopyEdit
useEffect(() => {
console.log('Effect runs');
});
A)
Runs once
B) Runs on every render
C) Runs on unmount
D) Never runs
Answer: B
38.
What
is a potential problem of running useEffect without dependencies that sets
state?
A) Infinite loop due to continuous re-renders
B) No problem
C) State never updates
D) React warning only
Answer: A
39.
Which
cleanup is needed when adding an event listener inside useEffect?
A) Remove the event listener in cleanup function
B) Clear interval
C) Cancel fetch
D) No cleanup needed
Answer: A
40.
What
will happen if you pass null in dependency array?
A) React treats it like []
B) React runs effect every render
C) React throws error
D) Effect never runs
Answer: C
41.
How
do you optimize effects to avoid unnecessary runs?
A) Use proper dependency arrays
B) Use memoized callbacks/functions
C) Avoid side effects inside render
D) All of the above
Answer: D
42.
When
using an interval in useEffect, where do you clear the interval?
A) Inside effect function before setting interval
B) Inside cleanup function returned by useEffect
C) Inside render function
D) You don't clear intervals
Answer: B
43.
How
can you ensure a fetch request does not update state after unmount?
A) Use an isMounted flag or AbortController
B) Do nothing
C) Use useState only
D) Use useRef only
Answer: A
44.
Which
of these is NOT true about dependency arrays?
A) Missing dependencies can cause bugs
B) Empty array means effect runs once
C) Including all relevant dependencies is important
D) They are optional and have no effect
Answer: D
45.
What
is the effect of setting state inside a cleanup function?
A) Causes error because component is unmounting
B) Allowed and safe
C) Causes infinite loop
D) Has no effect
Answer: A
46.
How
to handle asynchronous operations inside useEffect?
A) Declare async function inside effect and call it
B) Make effect function async
C) Use setTimeout only
D) Avoid async inside useEffect
Answer: A
47.
What
happens if cleanup function itself contains async calls?
A) React ignores async cleanup
B) Async cleanup is supported but may cause unexpected behavior
C) React throws error
D) Cleanup runs synchronously only
Answer: B
48.
Which
of these hooks triggers re-render when state changes?
A) useState
B) useRef
C) useEffect
D) None
Answer: A
49.
What
does React warn about with missing dependencies in useEffect?
A) It can cause bugs and stale data
B) Nothing, it's safe
C) It causes infinite loops only
D) Causes component crash
Answer: A
50.
Which
of these is the correct way to add dependencies for an effect that uses props.user
and a local count state?
A) [props.user, count]
B) []
C) [count] only
D) [props] only
Answer: A
