Services Work Learn About Contact
0/10
Lesson 8 of 10

useEffect Hook

useEffect lets you perform side effects in components: fetching data, subscribing to events, or manually changing the DOM. It runs after the component renders.

The dependency array controls when useEffect runs. An empty array [] means "run once on mount."

REACT
import { useState, useEffect } from "react";

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

  useEffect(() => {
    fetch("https://api.example.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // Empty array = run once

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
🧠

Quick Quiz

Answer correctly to unlock the next lesson.

Support the mission

This learning platform is 100% free: no ads, no tracking, no paywalls. If it helped you learn something useful, you can support future lessons or donate to Doctors Without Borders, which provides emergency medical care in crisis zones worldwide.

🎉

You completed React!

You finished all 10 lessons and quizzes. You now know the basics of React.