How to fix useDeferredValue is only available in React 18+ in React

ReactBEGINNERMEDIUMUpdated Dec 9, 2025· 140 views

The useDeferredValue hook is a new concurrent feature introduced in React 18. Attempting to import or use this hook in React 17 or earlier versions will result in an error because the hook does not exist in those releases.

Quick fix

Fixes useDeferredValue is only available in React 18+

npm list react react-dom
  1. Check your current React version
  2. Upgrade React and ReactDOM to version 18
  3. Update TypeScript types if using TypeScript
  4. Update your root render method to use createRoot
react — error
npm list react react-dom
useDeferredValue is only available in React 18+

What this error means

The useDeferredValue hook is a concurrent rendering feature that was introduced in React 18.0.0, released on March 29, 2022. This hook allows you to defer updating a part of the UI, keeping urgent updates responsive while deferring non-urgent updates to improve perceived performance. When you try to import or use useDeferredValue in React 17 or earlier, you'll encounter this error because the hook simply doesn't exist in those versions. React 18 introduced several new hooks as part of its concurrent features, including useDeferredValue, useTransition, useId, useSyncExternalStore, and useInsertionEffect. The error typically appears when your code imports useDeferredValue from React but your project dependencies are still using React 17 or earlier. This can happen after copying code from newer tutorials, upgrading part of your codebase without updating dependencies, or when working with mixed version environments.

Typical symptoms

  • Import error: "useDeferredValue is not exported from react"
  • TypeScript error: Property useDeferredValue does not exist on type typeof React
  • Runtime error: React.useDeferredValue is not a function
  • Application crashes when component using useDeferredValue renders
  • Build fails with module resolution errors for useDeferredValue

Common causes

  1. React version in package.json is 17.x or earlier
  2. React and ReactDOM versions are mismatched (one is 18+, other is 17 or earlier)
  3. Node modules not updated after changing package.json to React 18
  4. Monorepo or workspace has multiple React versions installed
  5. Using code examples from React 18 documentation without upgrading dependencies
  6. TypeScript @types/react package is outdated and doesn't include React 18 types

How to fix "useDeferredValue is only available in React 18+"

1Check your current React version

First, verify which version of React you're currently using:

bash
npm list react react-dom

Or check your package.json:

json
{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

If both show versions below 18.0.0, you need to upgrade.

2Upgrade React and ReactDOM to version 18

Update both React and ReactDOM to version 18 or later. Both packages must be the same version:

bash
npm install react@18 react-dom@18

Or with Yarn:

bash
yarn add react@18 react-dom@18

For the latest version:

bash
npm install react@latest react-dom@latest
3Update TypeScript types if using TypeScript

If you're using TypeScript, update the type definitions to match React 18:

bash
npm install --save-dev @types/react@18 @types/react-dom@18

Or for the latest types:

bash
npm install --save-dev @types/react@latest @types/react-dom@latest
4Update your root render method to use createRoot

React 18 requires using the new createRoot API to enable concurrent features. Update your index.js or index.tsx:

Before (React 17):

javascript
import ReactDOM from 'react-dom';
import App from './App';

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

After (React 18):

javascript
import { createRoot } from 'react-dom/client';
import App from './App';

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

Without using createRoot, your app will run in legacy mode and concurrent features like useDeferredValue won't be available.

5Clear node_modules and reinstall dependencies

Remove your node_modules folder and lockfile to ensure clean installation:

bash
rm -rf node_modules package-lock.json
npm install

Or with Yarn:

bash
rm -rf node_modules yarn.lock
yarn install

This ensures no conflicting versions remain cached.

6Verify the upgrade worked

Create a simple test component to verify useDeferredValue is available:

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

function TestComponent() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);

  console.log('React 18 useDeferredValue is working!');

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

export default TestComponent;

If this renders without errors, your upgrade is complete.

Advanced notes

Monorepo considerations: In monorepos using Yarn workspaces, npm workspaces, or Lerna, ensure all packages use the same React version. Use the "resolutions" field in package.json (Yarn) or "overrides" (npm 8.3+) to force a single React version:

json
{
  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Alternative to useDeferredValue in React 17: If you cannot upgrade to React 18 immediately, you can achieve similar behavior using debouncing with useState and useEffect:

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

function useDebouncedValue(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

This provides similar deferred rendering but without the automatic optimization that useDeferredValue provides through React's concurrent rendering engine.

Testing library compatibility: If you use @testing-library/react, upgrade it to version 13+ which supports React 18. Earlier versions may have compatibility issues with the new concurrent features.

Breaking changes in React 18: While most React 17 code works in React 18, be aware of automatic batching changes. React 18 batches state updates in more situations (including setTimeout, promises, and native event handlers), which generally improves performance but may affect some edge cases in your application logic.

Frequently asked questions

What does "useDeferredValue is only available in React 18+" mean?
0, released on March 29, 2022. This hook allows you to defer updating a part of the UI, keeping urgent updates responsive while deferring non-urgent updates to improve perceived performance. When you try to import or use useDeferredValue in React 17 or earlier, you'll encounter this error because the hook simply doesn't exist in those versions.
How do I fix "useDeferredValue is only available in React 18+"?
The useDeferredValue hook is a new concurrent feature introduced in React 18. Attempting to import or use this hook in React 17 or earlier versions will result in an error because the hook does not exist in those releases.
What causes "useDeferredValue is only available in React 18+"?
React version in package.json is 17.x or earlier React and ReactDOM versions are mismatched (one is 18+, other is 17 or earlier) Node modules not updated after changing package.json to React 18
Is the "useDeferredValue is only available in React 18+" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading