function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  
  if (!user) return <Loading />;
  return <Profile user={user} />;
}

Component renders → useEffect runs → Fetch starts → Data arrives → Re-render
                    [-- Waiting --]                 [-- Display --]

function Dashboard() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser().then(setUser);  // Fetch 1
  }, []);
  
  if (!user) return <Loading />;
  
  return (
    <UserPosts userId={user.id} />  // Fetch 2 starts AFTER Fetch 1 completes
  );
}

// Timeline:
// [Fetch User]───────►[Fetch Posts]───────►Display
//                     ↑ Can't start until user loads (waterfall)

function Dashboard() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    Promise.all([fetchUser(), fetchPosts(), fetchStats()])
      .then(([user, posts, stats]) => setData({ user, posts, stats }));
  }, []);
  
  if (!data) return <Loading />;
  
  return (
    <>
      <UserInfo user={data.user} />
      <Posts posts={data.posts} />
      <Stats stats={data.stats} />
    </>
  );
}

[Fetch User  ]
[Fetch Posts ]──►All Complete───►Render All
[Fetch Stats ]
              ↑ Parallel, but wait for slowest

// Start fetches immediately (not in useEffect)
const userPromise = fetchUser();
const postsPromise = fetchPosts();

function Dashboard() {
  return (
    <Suspense fallback={<UserSkeleton />}>
      <UserInfo userPromise={userPromise} />
    </Suspense>
    <Suspense fallback={<PostsSkeleton />}>
      <Posts postsPromise={postsPromise} />
    </Suspense>
  );
}

// Each component renders when its data is ready
function UserInfo({ userPromise }) {
  const user = use(userPromise);  // React 19's use() hook
  return <div>{user.name}</div>;
}

[Fetch User  ]───►Render User
[Fetch Posts ]─────────►Render Posts
              ↑ Independent, progressive rendering

// Next.js App Router
async function ProductPage({ params }) {
  const product = await db.products.findById(params.id);  // Runs on server
  return <ProductDetails product={product} />;
}

// Bad: Sequential (waterfall)
const user = await getUser();
const posts = await getPosts(user.id);
const comments = await getComments(posts[0].id);

// Good: Parallel where possible
const [user, stats] = await Promise.all([
  getUser(),
  getStats(),
]);
// Then sequential for dependent data
const posts = await getPosts(user.id);

// Example: Immediate and slow components streamed out of order

async function Page() {
  return (
    <div>
      <Header /> 
      {/* <Header> streams to client immediately */}
      
      <Suspense fallback={<Loading />}>
        <SlowComponent />
        {/* Placeholder <Loading /> is shown, and client JS
            will replace it with <SlowComponent> content
            as soon as the server streams it */}
      </Suspense>
      
      <Footer />
      {/* <Footer> can stream immediately,
          before or after <SlowComponent>, depending on what finishes first */}
    </div>
  );
}

undefined

// Without deduplication
// Component A: fetch('/api/user')
// Component B: fetch('/api/user')
// = 2 requests

// With deduplication (React cache / TanStack Query)
// Component A: useQuery(['user'], fetchUser)
// Component B: useQuery(['user'], fetchUser)
// = 1 request, shared result

const { data } = useQuery({
  queryKey: ['products'],
  queryFn: fetchProducts,
  staleTime: 60000,      // Fresh for 60s
  refetchOnMount: true,  // Background refetch
});

// Timeline:
// 1. Show cached data immediately
// 2. Check if stale
// 3. If stale, refetch in background
// 4. Update UI when fresh data arrives

const mutation = useMutation({
  mutationFn: createPost,
  onSuccess: () => {
    // Invalidate and refetch
    queryClient.invalidateQueries(['posts']);
    
    // Or update cache directly
    queryClient.setQueryData(['posts'], (old) => [...old, newPost]);
  },
});

function ProductCard({ product }) {
  if (!product) {
    return (
      <div className="card">
        <div className="skeleton-image" />
        <div className="skeleton-text" />
        <div className="skeleton-text short" />
      </div>
    );
  }
  return (
    <div className="card">
      <img src={product.image} />
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  );
}

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    // Cancel outgoing refetches
    await queryClient.cancelQueries(['todos']);
    
    // Snapshot previous value
    const previous = queryClient.getQueryData(['todos']);
    
    // Optimistically update
    queryClient.setQueryData(['todos'], (old) =>
      old.map(t => t.id === newTodo.id ? newTodo : t)
    );
    
    return { previous };
  },
  onError: (err, newTodo, context) => {
    // Rollback on error
    queryClient.setQueryData(['todos'], context.previous);
  },
});

const { data } = useQuery({
  queryKey: ['product', id],
  queryFn: () => fetchProduct(id),
  placeholderData: {
    name: 'Loading...',
    price: '--',
    image: '/placeholder.jpg',
  },
});

<ErrorBoundary fallback={<ErrorMessage />}>
  <Suspense fallback={<Loading />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

const { data } = useQuery({
  queryKey: ['products'],
  queryFn: fetchProducts,
  retry: 3,                    // Retry 3 times
  retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),  // Exponential backoff
});

Is the data static or rarely changes?
├── Yes → SSG or ISR
│
└── No → Does the page need SEO?
          ├── Yes → SSR or Streaming
          │
          └── No → Does it need real-time updates?
                    ├── Yes → Client-side + WebSocket/polling
                    │
                    └── No → Is initial load critical?
                              ├── Yes → SSR + Client hydration
                              └── No → Client-side fetching

// Bad: Race condition possible
useEffect(() => {
  fetchData().then(setData);
}, [id]);

// Good: Cleanup or use library
useEffect(() => {
  let cancelled = false;
  fetchData().then(data => {
    if (!cancelled) setData(data);
  });
  return () => { cancelled = true; };
}, [id]);

// Bad: No loading or error handling
const { data } = useQuery(['products'], fetchProducts);
return <ProductList products={data} />;  // data might be undefined

// Good: Handle all states
if (isLoading) return <Loading />;
if (error) return <Error message={error.message} />;
return <ProductList products={data} />;

// Bad: Fetching more than needed
const { data: user } = useQuery(['user'], () => 
  fetch('/api/users/full-profile')  // 50 fields
);
// Only using: user.name, user.avatar

// Good: Fetch only what's needed (or use GraphQL)
const { data: user } = useQuery(['user-summary'], () =>
  fetch('/api/users/summary')  // 3 fields
);

CLIENT                          NETWORK                         SERVER

1. fetch() called                                               
         │                                                      
2. DNS Lookup ─────────────────► DNS Server                    
         │                       │                              
         │◄──────────────────── IP: 93.184.216.34              
         │                                                      
3. TCP Handshake ─────────────────────────────────────────────► SYN
         │                                                      │
         │◄─────────────────────────────────────────────────── SYN-ACK
         │                                                      
         │───────────────────────────────────────────────────► ACK
         │                                                      
4. TLS Handshake (HTTPS) ─────────────────────────────────────► 
         │◄─────────────────────────────────────────────────── 
         │                                                      
5. HTTP Request ──────────────────────────────────────────────► 
         │                     GET /api/data HTTP/1.1           
         │                     Host: example.com                │
         │                                                      ▼
         │                                              6. Server processes
         │                                                      │
         │                                              7. Query database
         │                                                      │
         │                                              8. Build response
         │                                                      │
         │◄──────────────────────────────────────────────────── 
         │                     HTTP/1.1 200 OK                  
         │                     {"data": [...]}                  
         │                                                      
9. Parse response                                               
         │                                                      
10. Update state                                                
         │                                                      
11. Re-render                                                   

DNS Lookup:         10-100ms (cached: 0ms)
TCP Handshake:      50-100ms (1 round trip)
TLS Handshake:      50-150ms (2 round trips)
Request/Response:   50-500ms (depends on server + data size)
Parsing:            1-10ms
Rendering:          5-50ms
────────────────────────────────
TOTAL:              166-910ms

// WATERFALL CODE:
async function loadDashboard() {
  const user = await fetchUser();           // 200ms ─────┐
  const posts = await fetchPosts(user.id);  // 300ms ─────┼─► WAIT
  const comments = await fetchComments(posts[0].id); // 250ms ─┘
}

// TIMELINE (serial):
// |── fetchUser (200ms) ──|── fetchPosts (300ms) ──|── fetchComments (250ms) ──|
// Total: 750ms


// PARALLEL CODE:
async function loadDashboard() {
  // Start all independent fetches simultaneously
  const [user, globalPosts] = await Promise.all([
    fetchUser(),        // 200ms ──┐
    fetchGlobalPosts(), // 300ms ──┤► PARALLEL
  ]);                            // └► Wait for slowest: 300ms
  
  // Dependent fetch still sequential
  const userPosts = await fetchUserPosts(user.id);  // 250ms
}

// TIMELINE (parallel where possible):
// |── fetchUser (200ms) ───|
// |── fetchGlobalPosts (300ms) ──|── fetchUserPosts (250ms) ──|
// Total: 550ms (vs 750ms waterfall)

// SCENARIO: Multiple components need user data

function Header() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch('/api/user').then(r => r.json()).then(setUser);
  }, []);
  return <span>{user?.name}</span>;
}

function Sidebar() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch('/api/user').then(r => r.json()).then(setUser);  // SAME REQUEST!
  }, []);
  return <img src={user?.avatar} />;
}

function Dashboard() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch('/api/user').then(r => r.json()).then(setUser);  // SAME REQUEST!
  }, []);
  return <span>Welcome, {user?.name}</span>;
}

// RESULT: 3 identical network requests!
// Each takes 200ms, wasting bandwidth and time

// WITH TANSTACK QUERY:
function Header() {
  const { data: user } = useQuery(['user'], fetchUser);
  // First component to request starts the fetch
}

function Sidebar() {
  const { data: user } = useQuery(['user'], fetchUser);
  // Same query key = shares the same request/cache
}

function Dashboard() {
  const { data: user } = useQuery(['user'], fetchUser);
  // All three components share ONE network request
}

// RESULT: 1 network request, shared across components

// PROBLEM: Stale data after mutation

// User edits their profile
await updateProfile({ name: 'New Name' });

// But cached user data still shows old name!
// Other components display stale data

// SOLUTION 1: Invalidate and refetch
const queryClient = useQueryClient();

async function handleUpdate(newData) {
  await updateProfile(newData);
  
  // Invalidate the cache - next access will refetch
  queryClient.invalidateQueries(['user']);
}


// SOLUTION 2: Optimistic update + invalidate
async function handleUpdate(newData) {
  // Immediately update cache (optimistic)
  queryClient.setQueryData(['user'], (old) => ({
    ...old,
    ...newData,
  }));
  
  // Then persist to server
  try {
    await updateProfile(newData);
    // Invalidate to get any server-side changes
    queryClient.invalidateQueries(['user']);
  } catch (error) {
    // Rollback on failure
    queryClient.setQueryData(['user'], originalData);
  }
}


// SOLUTION 3: Server returns updated data
async function handleUpdate(newData) {
  const updatedUser = await updateProfile(newData);
  
  // Server returns the new state - update cache directly
  queryClient.setQueryData(['user'], updatedUser);
}

// THE BUG:
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    fetch(`/api/search?q=${query}`)
      .then(r => r.json())
      .then(setResults);
  }, [query]);
  
  return <ResultList items={results} />;
}

// SCENARIO:
// User types "re" - starts fetch A (takes 500ms)
// User types "react" - starts fetch B (takes 200ms)
// Fetch B completes first - shows "react" results
// Fetch A completes second - OVERWRITES with "re" results!
// User sees wrong results!


// THE FIX: Abort previous request
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    const controller = new AbortController();
    
    fetch(`/api/search?q=${query}`, { signal: controller.signal })
      .then(r => r.json())
      .then(setResults)
      .catch(e => {
        if (e.name === 'AbortError') return; // Expected
        throw e;
      });
    
    // Cleanup: abort if query changes or component unmounts
    return () => controller.abort();
  }, [query]);
  
  return <ResultList items={results} />;
}


// OR use a library that handles this:
function SearchResults({ query }) {
  const { data: results } = useQuery({
    queryKey: ['search', query],
    queryFn: () => fetch(`/api/search?q=${query}`).then(r => r.json()),
    // TanStack Query automatically cancels outdated requests
  });
}

// TRADITIONAL: Each component handles loading
function ProductPage() {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchProduct()
      .then(setProduct)
      .finally(() => setLoading(false));
  }, []);
  
  if (loading) return <Spinner />;  // Loading logic in component
  return <Product data={product} />;
}


// SUSPENSE: Loading delegated to boundary
function ProductPage() {
  const product = use(fetchProduct());  // Suspends if not ready
  return <Product data={product} />;    // Only renders when ready
}

// Boundary handles loading
function App() {
  return (
    <Suspense fallback={<Spinner />}>  {/* Loading UI here */}
      <ProductPage />
    </Suspense>
  );
}

// CONCEPTUAL MECHANISM:

function use(promise) {
  // Check if promise is already resolved
  if (promise.status === 'fulfilled') {
    return promise.value;
  }
  
  if (promise.status === 'rejected') {
    throw promise.reason;
  }
  
  // Not yet resolved - THROW the promise!
  throw promise;
}

// React catches the thrown promise
// Shows nearest Suspense fallback
// When promise resolves, re-renders the component

// This is why Suspense only works with:
// - React's use() hook
// - Libraries that support Suspense (like TanStack Query)
// - Server Components