How to fix startTransition cannot be called during render in React

What this error means

The "startTransition cannot be called during render" error is a React 18+ safeguard that prevents improper use of the Concurrent Features API. startTransition is designed to mark state updates as non-urgent transitions, allowing React to interrupt them for more urgent updates like user input. When you call startTransition during the render phase (directly in the component body), React cannot properly schedule and manage these transitions. The render phase must be pure and free of side effects - calling startTransition here violates this principle and can lead to unpredictable behavior, infinite loops, or rendering inconsistencies. This error typically appears in development mode as React actively checks for improper API usage. In production, it may manifest as unexpected rendering behavior or runtime errors.

Typical symptoms

• Error message "startTransition cannot be called during render" appears in console
• Components fail to render when attempting state updates
• React DevTools shows errors during component execution
• Application crashes or hangs when certain components mount
• Warnings about improper hook usage in concurrent mode

Common causes

1. Calling startTransition directly in component body during render phase
2. Using startTransition inside conditional logic that runs during render
3. Attempting to wrap state updates in startTransition within useMemo or useCallback dependencies
4. Calling startTransition in server-side rendering context where it's not available
5. Using startTransition synchronously with state setters during initial render

How to fix "startTransition cannot be called during render"

// ❌ WRONG - calling during render
function SearchResults({ query }) {
  startTransition(() => {
    setSearchQuery(query);
  });

  return <div>...</div>;
}

// ✅ CORRECT - calling in event handler
function SearchResults() {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = (query: string) => {
    startTransition(() => {
      setSearchQuery(query);
    });
  };

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

// ❌ WRONG - calling during render
function FilteredList({ filter }) {
  startTransition(() => {
    setFilteredItems(items.filter(item => item.matches(filter)));
  });

  return <List items={filteredItems} />;
}

// ✅ CORRECT - using useEffect
function FilteredList({ filter }) {
  const [filteredItems, setFilteredItems] = useState([]);

  useEffect(() => {
    startTransition(() => {
      setFilteredItems(items.filter(item => item.matches(filter)));
    });
  }, [filter]);

  return <List items={filteredItems} />;
}

import { useTransition } from 'react';

function SearchComponent() {
  const [isPending, startTransition] = useTransition();
  const [searchResults, setSearchResults] = useState([]);

  const handleSearch = (query: string) => {
    startTransition(() => {
      // This state update is now marked as a transition
      setSearchResults(performExpensiveSearch(query));
    });
  };

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

# Check your React version
npm list react react-dom

# Upgrade if needed
npm install react@latest react-dom@latest

import { startTransition } from 'react';
// or
import { useTransition } from 'react';

// ❌ WRONG - async function in React 18
const handleSubmit = () => {
  startTransition(async () => {
    const result = await fetchData();
    setData(result);
  });
};

// ✅ CORRECT - wrap only the state update
const handleSubmit = async () => {
  const result = await fetchData();

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

Advanced notes

// ❌ WRONG
const memoizedValue = useMemo(() => {
  startTransition(() => setCount(count + 1));
  return count * 2;
}, [count]);

// ✅ CORRECT
const handleIncrement = useCallback(() => {
  startTransition(() => setCount(count + 1));
}, [count]);

Frequently asked questions

What does "startTransition cannot be called during render" mean?

The "startTransition cannot be called during render" error is a React 18+ safeguard that prevents improper use of the Concurrent Features API. startTransition is designed to mark state updates as non-urgent transitions, allowing React to interrupt them for more urgent updates like user input. When you call startTransition during the render phase (directly in the component body), React cannot properly schedule and manage these transitions.

How do I fix "startTransition cannot be called during render"?

This error occurs when startTransition is called directly in the render phase instead of in event handlers or effects. React requires startTransition to be called during non-render phases to properly manage concurrent updates and maintain rendering stability.

What causes "startTransition cannot be called during render"?

Calling startTransition directly in component body during render phase Using startTransition inside conditional logic that runs during render Attempting to wrap state updates in startTransition within useMemo or useCallback dependencies

Is the "startTransition cannot be called during render" error serious?

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

Related errors

• startTransition requires at least one state update inside its function

  startTransition requires at least one state update inside its function

  LOW

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

  Cannot await inside startTransition - updates may happen out of order

  MEDIUM

• Suspense boundary received an update before it finished hydrating when using startTransition

  Suspense boundary received update before hydration finished

  MEDIUM

• Cannot use startTransition with async state updates

  Cannot use startTransition with async state updates

  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.dev - startTransition
• react.dev - useTransition