How to fix useTransition is not available in this React build in React

Check that your package.json has React 18.0.0 or higher installed:

npm ls react

Look at the version shown. If it's below 18.0.0, upgrade React and React DOM:

npm install react@latest react-dom@latest

Or install a specific React 18+ version:

npm install [email protected] [email protected]

After upgrading, clear your node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

Concurrent rendering is only enabled when using the modern rendering API. Update your application's entry point to use createRoot instead of the legacy render method.

Before - Legacy API (no concurrent rendering):

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

After - Modern API (concurrent rendering enabled):

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Note the change from react-dom to react-dom/client in the import. This is essential for enabling concurrent features.

Ensure your bundler (webpack, Vite, Parcel, etc.) is resolving React to the correct build. Check that it's not forcing an old or compatibility build.

For Webpack:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: require.resolve('react')
    }
  }
};

For Vite:
No special configuration needed. Vite automatically resolves to the modern React build from node_modules.

Verify the React entry point:

# Check which React file is being loaded
node -e "console.log(require.resolve('react'))"

It should point to a file in node_modules/react that includes concurrent rendering support.

Create React App has specific version requirements to fully support React 18 and concurrent features.

npm install [email protected] --save

Or update to the latest version:

npm install react-scripts@latest --save

Then restart your development server:

npm start

If you still have issues after updating react-scripts, eject from Create React App (note: this is permanent):

npm run eject

Then ensure your webpack config uses createRoot instead of render.

Sometimes the issue is stale cached bundles or build artifacts.

# Clean build
rm -rf node_modules package-lock.json
npm install
npm run build

For development:

# Stop dev server (Ctrl+C)
# Clear any cached files
rm -rf .next build dist

# Restart
npm run dev

Clear browser cache:
- Chrome: DevTools > Settings > Cache > Clear site data
- Or use hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

Hard refresh ensures you're loading the latest bundled React code.

In Next.js 12 and later, React 18 concurrent features should be automatically available in App Router projects. Check your setup:

Next.js 13+ with App Router:
Concurrent features are enabled by default. Just use useTransition normally:

// app/components/SearchComponent.tsx
'use client'; // Must be a Client Component

import { useTransition } from 'react';

export function Search() {
  const [isPending, startTransition] = useTransition();
  
  return (
    <button onClick={() => startTransition(() => {
      // Your state update here
    })}>
      {isPending ? 'Loading...' : 'Click me'}
    </button>
  );
}

Next.js 12 with Pages Router:
Ensure you're using the latest next version:

npm install next@latest

Server Components (which don't support hooks) shouldn't use useTransition — mark components with 'use client' at the top.

If you're loading React from a CDN (not recommended for modern apps), ensure it's React 18+:

Bad - Old CDN build:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

Good - React 18 CDN:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

However, CDN-loaded React is not recommended for modern React applications. Use npm/yarn to manage your React dependency instead:

npm install react react-dom

And remove any CDN script tags from your HTML file.