How to fix This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition. in React

import { startTransition } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(newData => {
        // Wrap the state update in startTransition
        startTransition(() => {
          setData(newData);
        });
      });
  }, []);

  return <div>{data?.value}</div>;
}

import { useTransition, useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(newData => {
        startTransition(() => {
          setData(newData);
        });
      });
  }, []);

  return (
    <div>
      {isPending ? 'Loading...' : data?.value}
    </div>
  );
}

import { useState, useEffect } from 'react';

function MyComponent() {
  const [hasMounted, setHasMounted] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  useEffect(() => {
    // Only fetch after component has mounted
    if (!hasMounted) return;

    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, [hasMounted]);

  return <div>{data?.value}</div>;
}

import { useState, useEffect } from 'react';

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

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

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(newData => {
        // Ignore response if effect was cleaned up
        if (!cancelled) {
          setData(newData);
        }
      });

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

  return <div>{data?.name}</div>;
}

import { useState, useEffect } from 'react';
import { useAuth } from './auth-context';

function MyComponent() {
  const { user, isLoading } = useAuth();
  const [data, setData] = useState(null);

  useEffect(() => {
    // Don't fetch until auth is resolved
    if (isLoading || !user) return;

    fetch('/api/protected-data', {
      headers: {
        Authorization: `Bearer ${user.token}`
      }
    })
      .then(res => res.json())
      .then(setData);
  }, [user, isLoading]);

  return <div>{data?.value}</div>;
}