Compare render-as-you-fetch, fetch-on-render, and fetch-then-render.

import { useState, useEffect, Suspense, use } from "react";

const DELAY = 900;
const t0 = Date.now();
const at = () => Math.round(Date.now() - t0) + "ms";
const load = (name) => new Promise((r) => setTimeout(() => r(name), DELAY));

// ── 1. FETCH-ON-RENDER ─────────────────────────────────────────────────────
// The child does not exist until the parent's data arrives, so its request
// cannot start any earlier. Two sequential round trips.
function Posts() {
  const [d, setD] = useState(null);
  useEffect(() => { load("posts").then(setD); }, []);
  return <Line label="posts" value={d} />;
}
function OnRender() {
  const [user, setUser] = useState(null);
  useEffect(() => { load("user").then(setUser); }, []);
  return (
    <Panel title="❌ fetch-on-render — a waterfall">
      <Line label="user" value={user} />
      {user && <Posts />}
    </Panel>
  );
}

// ── 2. FETCH-THEN-RENDER ───────────────────────────────────────────────────
// Parallel requests, but nothing renders until BOTH have landed.
function ThenRender() {
  const [data, setData] = useState(null);
  useEffect(() => {
    Promise.all([load("user"), load("posts")]).then(([u, p]) => setData({ u, p }));
  }, []);
  return (
    <Panel title="⚠️ fetch-then-render — parallel, but blank until done">
      {!data ? <em style={{ fontSize: 13 }}>nothing on screen yet…</em> : (
        <>
          <Line label="user" value={data.u} />
          <Line label="posts" value={data.p} />
        </>
      )}
    </Panel>
  );
}

// ── 3. RENDER-AS-YOU-FETCH ─────────────────────────────────────────────────
// Promises created at MODULE SCOPE — before any render. A promise created
// during render would be a new one on every attempt and never settle.
const userP = load("user");
const postsP = load("posts");
function User() { return <Line label="user" value={use(userP)} />; }
function PostsRAYF() { return <Line label="posts" value={use(postsP)} />; }
function AsYouFetch() {
  return (
    <Panel title="✅ render-as-you-fetch — shell first, sections fill in">
      <div style={{ fontSize: 13, color: "#161" }}>shell rendered at {at()}</div>
      {/* SEPARATE boundaries: one around both would wait for the slowest. */}
      <Suspense fallback={<em style={{ fontSize: 13 }}>loading user…</em>}><User /></Suspense>
      <Suspense fallback={<em style={{ fontSize: 13 }}>loading posts…</em>}><PostsRAYF /></Suspense>
    </Panel>
  );
}

function Line({ label, value }) {
  return (
    <div style={{ fontSize: 13 }}>
      {value ? "✓ " + label + " at " + at() : "… waiting for " + label}
    </div>
  );
}
function Panel({ title, children }) {
  return (
    <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, marginBottom: 10 }}>
      <strong style={{ fontSize: 13 }}>{title}</strong>
      <div style={{ marginTop: 4 }}>{children}</div>
    </div>
  );
}

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 540 }}>
      <OnRender />
      <ThenRender />
      <AsYouFetch />
      <p style={{ fontSize: 13, color: "#666" }}>
        Reload to re-run. Every request takes the same {DELAY}ms. The first
        panel finishes last because its second request cannot start until the
        first finishes. The second finishes sooner but shows nothing at all
        until it does. The third has a shell on screen immediately and each
        section appears on its own.
      </p>
    </div>
  );
}