🔄 useEffect + fetch()

In React, useEffect() is commonly used to perform side effects such as data fetching. Combine it with fetch() to retrieve data from APIs when the component mounts.

📦 Basic Example

import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UsersList;
  

🧼 Using async/await

You can also use async/await inside useEffect for cleaner code. But since useEffect itself can't be async, define an inner function.

useEffect(() => {
  const getUsers = async () => {
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      console.error('Error fetching users:', err);
    }
  };

  getUsers();
}, []);
  

📋 Summary

• useEffect() runs after component render
• Perfect for data fetching with fetch()
• Use async functions inside useEffect if needed
• Always handle loading and error states in real apps