📖 Notes LESSON 21 OF 32

useState & useEffect

⏱️ 34 min

⚛️ React

Giving Components Memory

useState lets a component remember values between renders. useEffect lets it run side effects — like fetching data — in response to those values changing.

React Hooks

State & Side Effects

🔢

useState

Returns a state value and a setter — calling the setter triggers a re-render.

🔁

useEffect

Runs a function after render — for fetching data, subscriptions, timers.

📋

Dependency Array

The second argument to useEffect — controls when the effect re-runs.

⏳

Loading State

A common pattern: track loading as its own piece of state while a fetch is in flight.

Fetching Data on Mount

JSX

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []); // empty array = run once, on mount

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

⚠️

The empty dependency array matters

An empty array [] means "run once on mount." Omitting it entirely means the effect re-runs after every single render — usually not what you want, and a common source of infinite fetch loops.

← Lesson 20: Components, JSX & Props Lesson 22: React Router →