useEffect

What this module covers

4 steps · React

1. Step 1. useEffect Hook

   A side effect is anything that reaches outside a component — fetching data, setting timers, updating the document title, or subscribing to events. useEffect(() => { document.title = "App"; }); // runs after every render useEffect(() => { fetchUser(); }, []); // runs once on mount useEffect(() => { fetchUser(userId); }, [userId]); // runs when userId changes Data fetching with cleanup: useEffect(() => { let cancelled = false; async function load() { const res = await fetch('/api/data'); const data = await res.json(); if (!cancelled) setData(data); } load(); return () => { cancelled = true; }; // cleanup }, []); Return a function from useEffect to clean up timers, subscriptions, or pending fetches when the component unmounts.

   Without the cleanup function, every time this component mounted it would leave a running interval behind — the classic memory-leak pattern useEffect's return value exists to prevent. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the effect set up an interval and clean it up on unmount?

2. Step 2. Quiz: useEffect Hook

   Answer these questions about effects and the dependency array.

   An empty dependency array means "run once on mount"; the cleanup function prevents leaked timers/subscriptions. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Fetch on Click

   Build a component that fetches a random dog image from https://dog.ceo/api/breeds/image/random every time a button is clicked. Show a loading state.

   This one is triggered by a click rather than mount, so the fetch lives inside the event handler directly instead of inside useEffect — useEffect is for effects tied to render/props changing, not to a specific user action. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does clicking the button fetch a new image and show a loading state while it does?

4. Step 4. Mini project: useEffect

   Build a component that fetches a random dog image from https://dog.ceo/api/breeds/image/random every time a button is clicked. Show a loading state. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This one is triggered by a click rather than mount, so the fetch lives inside the event handler directly instead of inside useEffect — useEffect is for effects tied to render/props changing, not to a specific user action. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does clicking the button fetch a new image and show a loading state while it does?