Data Fetching

function Posts() {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState("loading"); // loading | error | ok

  useEffect(() => {
    let cancelled = false;

    fetch("/api/posts")
      .then((r) => r.json())
      .then((data) => {
        if (!cancelled) {
          setPosts(data);
          setStatus("ok");
        }
      })
      .catch(() => {
        if (!cancelled) setStatus("error");
      });

    return () => {
      cancelled = true;
    };
  }, []);

  if (status === "loading") return <p>Loading…</p>;
  if (status === "error") return <p>ভুল হয়েছে</p>;
  return posts.map((p) => <Post key={p.id} post={p} />);
}

import { useQuery } from "@tanstack/react-query";

function Posts() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["posts"],
    queryFn: () => fetch("/api/posts").then((r) => r.json()),
  });

  if (isLoading) return <p>Loading…</p>;
  if (isError) return <p>ভুল হয়েছে</p>;
  return data.map((p) => <Post key={p.id} post={p} />);
}

// Cache invalidation
const queryClient = useQueryClient();
queryClient.invalidateQueries({ queryKey: ["posts"] });

import { use } from "react";

function Posts({ postsPromise }) {
  // promise resolved না হওয়া পর্যন্ত — Suspense fallback
  const posts = use(postsPromise);

  return posts.map((p) => <Post key={p.id} post={p} />);
}

// parent-এ
<Suspense fallback={<p>Loading…</p>}>
  <Posts postsPromise={fetchPosts()} />
</Suspense>