How to fix Cannot await inside startTransition, updates may happen out of order in React

import { startTransition } from 'react';

function handleUpdate() {
  startTransition(async () => {
    const result = await fetchData();

    // WRONG: This update loses transition context
    // setData(result);

    // CORRECT: Wrap post-await updates in startTransition
    startTransition(() => {
      setData(result);
    });
  });
}

import { startTransition, useRef } from 'react';

function SearchComponent() {
  const abortControllerRef = useRef<AbortController | null>(null);

  const handleSearch = (query: string) => {
    // Cancel previous request
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    abortControllerRef.current = new AbortController();

    startTransition(async () => {
      try {
        const results = await fetch(`/api/search?q=${query}`, {
          signal: abortControllerRef.current.signal
        });
        const data = await results.json();

        startTransition(() => {
          setSearchResults(data);
        });
      } catch (error) {
        if (error.name === 'AbortError') {
          // Request was cancelled, ignore
          return;
        }
        throw error;
      }
    });
  };

  return (
    <input onChange={(e) => handleSearch(e.target.value)} />
  );
}

import { startTransition, useRef } from 'react';

function DataComponent() {
  const requestIdRef = useRef(0);

  const loadData = (params: any) => {
    const currentRequestId = ++requestIdRef.current;

    startTransition(async () => {
      const data = await fetchData(params);

      // Only update if this is still the latest request
      if (currentRequestId === requestIdRef.current) {
        startTransition(() => {
          setData(data);
        });
      } else {
        console.log('Discarding stale response');
      }
    });
  };

  return <button onClick={() => loadData({ id: 123 })}>Load</button>;
}

import { useTransition } from 'react';

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

  const handleSubmit = () => {
    startTransition(async () => {
      const result = await submitForm();

      startTransition(() => {
        setData(result);
      });
    });
  };

  return (
    <>
      <button onClick={handleSubmit} disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
      {isPending && <Spinner />}
    </>
  );
}

// React 19 allows async callbacks directly
import { useTransition } from 'react';

function React19Component() {
  const [isPending, startTransition] = useTransition();

  const handleAction = () => {
    startTransition(async () => {
      // Async operations are better supported
      const result = await performAction();

      // Still need to wrap state updates after await
      startTransition(() => {
        setState(result);
      });
    });
  };
}