একটি API থেকে ডেটা Fetch করা

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [userId]);

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

useEffect(() => {
  let ignore = false;
  setLoading(true);

  fetch(`/api/users/${userId}`)
    .then((res) => res.json())
    .then((data) => {
      if (!ignore) setUser(data); // skip if this effect is stale
    })
    .finally(() => {
      if (!ignore) setLoading(false);
    });

  return () => {
    ignore = true; // marks this specific request as stale
  };
}, [userId]);

useEffect(() => {
  async function loadUser() {
    const res = await fetch(`/api/users/${userId}`);
    const data = await res.json();
    setUser(data);
  }
  loadUser();
}, [userId]);