Using it with Async Data Fetching

⚙️ Why Combine useEffect with Async Fetching?

In modern web apps, fetching data from an API is a core task. When working with React functional components, the best way to handle this is by combining useEffect with an async request. But here’s the catch: useEffect itself can’t be made async directly. So how do we fetch data cleanly? Let’s walk through the correct and clean way to do it. 🚀

❌ First, What NOT to Do

It’s a common mistake to try making the effect function itself async:

// ❌ Don’t do this
useEffect(async () => {
  const res = await fetch("/api/data");
  const data = await res.json();
  setData(data);
}, []);

This will throw a warning because useEffect expects the function to return either nothing or a cleanup function, not a promise.

✅ Correct Way: Define Async Inside

The proper way is to define an async function inside the effect and call it right away:

import { useEffect, useState } from "react";

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!res.ok) throw new Error("Failed to fetch users");
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

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

📦 Using Axios Instead of fetch

axios is a popular HTTP client that simplifies error handling and automatically parses JSON. Here's how to use it with useEffect:

import axios from "axios";

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get("https://api.example.com/items");
      setItems(response.data);
    } catch (err) {
      console.error(err);
    }
  };

  fetchData();
}, []);

⛔ Optional: AbortController to Cancel Fetch

If your component may unmount before the fetch completes, you can prevent memory leaks using AbortController:

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const res = await fetch("https://api.example.com/data", {
        signal: controller.signal,
      });
      const data = await res.json();
      setData(data);
    } catch (err) {
      if (err.name === "AbortError") {
        console.log("Fetch aborted");
      } else {
        console.error(err);
      }
    }
  };

  fetchData();

  return () => {
    controller.abort();
  };
}, []);

💡 Tips for Success

• ✅ Always handle loading and error states for a smooth UX.
• ✅ Don’t forget to clean up if needed (especially for long-running requests).
• ✅ Keep the dependency array in sync — add variables like query or id when you want the effect to re-run.
• ✅ Use axios.CancelToken or AbortController to cancel requests on unmount.

🔄 Bonus: Fetch on Prop or State Change

To refetch data whenever a search term or ID changes, add it to the dependency array:

useEffect(() => {
  const fetchDetails = async () => {
    const res = await fetch(`/api/product/${productId}`);
    const data = await res.json();
    setProduct(data);
  };

  if (productId) fetchDetails();
}, [productId]);

🚀 Final Thoughts

Combining useEffect with async data fetching is essential for building dynamic and real-time applications in React. With the right structure — a properly scoped async function, clear loading/error handling, and clean dependencies — your app becomes reliable, responsive, and ready for scale. 🌐⚙️