How to fix Cannot use startTransition with async state updates in React

What this error means

In React 18, the `startTransition` API requires the callback function to be synchronous. React immediately executes this function and marks all state updates that happen during its synchronous execution as transitions. When you use `await` inside a `startTransition` callback, any state updates that occur after the `await` statement are no longer marked as transitions. This is a JavaScript limitation caused by React losing the scope of the async context. Once execution crosses an `await` boundary, React can no longer track which state updates should be treated as non-urgent transitions versus urgent updates. This means async operations like data fetching cannot be directly wrapped in `startTransition` in React 18. The React team acknowledged this as a known limitation that would be addressed in future versions. In React 19, this restriction has been lifted, and `startTransition` now supports async callbacks natively, allowing developers to perform asynchronous operations without workarounds.

Typical symptoms

• State updates after await statements are not marked as transitions
• UI becomes unresponsive during async operations that should be interruptible
• Console warnings about async functions in startTransition
• Transitions not working as expected with data fetching logic
• State updates after promises resolve block the main thread

Common causes

1. Using async/await directly inside a startTransition callback in React 18
2. Not wrapping post-await state updates in a nested startTransition call
3. Expecting React 18 to track async context across await boundaries
4. Attempting to mark asynchronous data fetching operations as transitions
5. Missing the synchronous function requirement in React 18 documentation

How to fix "Cannot use startTransition with async state updates"

import { startTransition, useState } from 'react';

function SearchComponent() {
  const [results, setResults] = useState([]);

  const handleSearch = async (query: string) => {
    // Fetch can happen outside startTransition
    const data = await fetchSearchResults(query);

    // Wrap the state update in startTransition
    startTransition(() => {
      setResults(data);
    });
  };

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

import { useTransition, useState } from 'react';

function SearchComponent() {
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = async (query: string) => {
    const data = await fetchSearchResults(query);

    startTransition(() => {
      setResults(data);
    });
  };

  return (
    <div>
      <input onChange={(e) => handleSearch(e.target.value)} />
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </div>
  );
}

import { startTransition, useState } from 'react';

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

  const loadData = async () => {
    // Async work happens outside
    const response = await fetch('/api/data');
    const result = await response.json();

    // Only the state update is in startTransition
    startTransition(() => {
      setData(result);
    });
  };

  return (
    <button onClick={loadData}>
      Load Data
    </button>
  );
}

// React 19 - async functions work directly
import { startTransition, useState } from 'react';

function SearchComponent() {
  const [results, setResults] = useState([]);

  const handleSearch = (query: string) => {
    startTransition(async () => {
      // Async function works directly in React 19
      const data = await fetchSearchResults(query);
      setResults(data);
    });
  };

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

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

function SearchComponent() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  const [results, setResults] = useState([]);

  useEffect(() => {
    async function search() {
      if (deferredQuery) {
        const data = await fetchSearchResults(deferredQuery);
        setResults(data);
      }
    }
    search();
  }, [deferredQuery]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ResultsList results={results} />
    </div>
  );
}

Advanced notes

import { act, render, screen } from '@testing-library/react';

test('handles transition updates', async () => {
  render(<SearchComponent />);

  await act(async () => {
    fireEvent.change(screen.getByRole('textbox'), {
      target: { value: 'query' }
    });

    // Wait for async transition to complete
    await new Promise(resolve => setTimeout(resolve, 100));
  });

  expect(screen.getByText('Results')).toBeInTheDocument();
});

Frequently asked questions

What does "Cannot use startTransition with async state updates" mean?

In React 18, the startTransition API requires the callback function to be synchronous. React immediately executes this function and marks all state updates that happen during its synchronous execution as transitions. When you use await inside a startTransition callback, any state updates that occur after the await statement are no longer marked as transitions.

How do I fix "Cannot use startTransition with async state updates"?

This error occurs in React 18 when trying to use async/await inside startTransition callbacks, causing state updates after await to lose their transition marking. React 18 requires synchronous functions for startTransition, though this limitation is resolved in React 19.

What causes "Cannot use startTransition with async state updates"?

Using async/await directly inside a startTransition callback in React 18 Not wrapping post-await state updates in a nested startTransition call Expecting React 18 to track async context across await boundaries

Is the "Cannot use startTransition with async state updates" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Cannot await inside startTransition, updates may happen out of order

  Cannot await inside startTransition - updates may happen out of order

  MEDIUM

• ReactDOM.render is deprecated and will be removed

  How to fix "ReactDOM.render is deprecated and will be removed" in React

  MEDIUM

• startTransition cannot be called during render

  startTransition cannot be called during render

  MEDIUM

• PropTypes is not part of the React namespace

  PropTypes is not part of the React namespace

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Docs: startTransition(Official Docs)
• 📖
  React Docs: useTransition Hook(Official Docs)
• 💬
  React 18 Working Group: startTransition Discussion(Stack Overflow)
• LogRocket: Getting Started with startTransition in React 19
• Callstack: React 19 Async Handling Guide