Full-Stack · Quick Reference

Lesson 21 — useState & useEffect Cheat Sheet

Full-Stack

In one line: useState gives a component memory; useEffect runs side effects like fetching data, controlled by its dependency array.

Key Ideas

1useState. Returns [value, setter]; setter triggers re-render.

2useEffect. Runs a function after render.

3[] dependency. Effect runs once, on mount.

4No array argument. Effect runs after every render.

5Loading state. Track fetch-in-flight as its own boolean.

Fetch on Mount

const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('/api/users') .then(r => r.json()) .then(d => { setUsers(d); setLoading(false); }); }, []);