Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Exercise 1 of 1
Five scenarios. Decide which effect hook is appropriate — and learn the single question that makes the timing distinction obvious.
Choose useEffect or useLayoutEffect. Key question: does this need to happen before the browser paints?
Fetching user data from an API after the component mounts.
Measuring a DOM element's width and setting a state variable to display it — and you need to avoid a visible flash of the wrong size.
Adding a "scroll to top" behavior when a route changes.
A tooltip that must position itself relative to a target element — wrong position would flash before the correct one.
Subscribing to a browser WebSocket after mount.
0/5 answered
💡 Default to useEffect. Only reach for useLayoutEffect when you need to read the DOM and update something before the user sees the initial paint — otherwise you block rendering unnecessarily.