React Hooks useEffect Hook 2

Question 1

What hook should you use instead of useEffect when you need the effect to run synchronously before the browser paints?

Accepted Answer

useLayoutEffect

Answer

useLayoutEffect fires synchronously after DOM mutations but before the browser paints, similar to componentDidMount.

Question 2

How do you fetch data on component mount using useEffect?

Accepted Answer

useEffect(() => { fetchData(); }, [])

Answer

You call the async function inside a non-async effect callback with an empty dependency array to fetch on mount.

Question 3

Why can't you directly make the useEffect callback an async function?

Accepted Answer

Async functions return a Promise, but useEffect expects a cleanup function or nothing

Answer

useEffect expects the callback to return either undefined or a cleanup function, not a Promise.

Question 4

Which dependency array value causes useEffect to run on every render?

Accepted Answer

No array at all (omit the second argument)

Answer

Omitting the dependency array entirely tells React the effect has no condition and should run after every render.

Question 5

What is a common mistake when including objects or arrays in useEffect dependencies?

Accepted Answer

A new reference is created on each render, causing infinite re-runs

Answer

Objects and arrays are compared by reference; a new literal on each render will always trigger the effect.

React Practice Test