Fix React useState is Not a Function Error (2026)

The useState is not a function error means that your React code is trying to call useState as if it were a function, but it’s not available in the current scope, or it’s been redefined.

This usually happens because React itself hasn’t been imported correctly, or because a file with the same name as a React internal module is shadowing the actual import.

Here are the most common reasons and how to fix them:

1. Incorrect Import of React: You might have forgotten to import React or useState at all, or you’ve imported it incorrectly.

   • Diagnosis: Look at the top of your component file. Do you see import React, { useState } from 'react'; or import { useState } from 'react';?
   • Fix: Ensure your imports are correct. For functional components, import { useState } from 'react'; is usually sufficient. If you’re using JSX, you might also need import React from 'react'; depending on your Babel configuration, but often useState alone is enough if React is implicitly available.
   • Why it works: This makes the useState hook available in your component’s scope, allowing you to call it.

2. Importing React as a Default Import and Using Named Import: Sometimes, people import React as a default and then try to use useState as if it were a property of that default.

   • Diagnosis: Check for imports like import MyReactAlias from 'react'; followed by an attempt to use MyReactAlias.useState(...).
   • Fix: Change your import to import { useState } from 'react';. If you need other parts of React, you can combine them: import React, { useState } from 'react';.
   • Why it works: useState is a named export from the react package, not a property of the default export.

3. Conflicting File or Directory Names: You might have accidentally created a file named react.js or a directory named react in your project’s src folder (or a parent directory). Node.js’s module resolution might pick this up instead of the actual node_modules/react package.

   • Diagnosis: Manually inspect your src directory for any files or folders named react.js, react/index.js, or just react.
   • Fix: Rename any conflicting files or directories. For example, rename src/react.js to src/myReactUtils.js.
   • Why it works: This prevents your local files from shadowing the actual react package installed in node_modules, ensuring that import { useState } from 'react'; correctly points to the library.

4. Typo in useState: A simple typographical error can cause this.

   • Diagnosis: Carefully check the spelling of useState in your code. Is it userState, usestate, useState (with a lowercase 's')?
   • Fix: Correct the spelling to useState.
   • Why it works: JavaScript is case-sensitive. useState is the correct name; anything else is an undefined variable.

5. Using useState Outside a Functional Component or Custom Hook: Hooks can only be called at the top level of React functional components or custom hooks. Calling useState inside a regular JavaScript function, a class component, or within conditional logic (like if statements or loops) will result in errors, though this specific error message is less common for this particular mistake than "Rendered fewer hooks than expected". However, if useState isn’t properly imported within that scope, it could manifest as "not a function."

   • Diagnosis: Trace where useState is being called. Is it directly inside your function MyComponent() { ... } or const MyComponent = () => { ... }? Or is it inside a nested function, a callback, or a useEffect’s cleanup function where it’s not supposed to be?
   • Fix: Ensure useState is called only at the top level of your functional component or custom hook. If you need state in a different context, consider passing state down as props or using context API.
   • Why it works: React’s hook rules ensure that hooks are called in a consistent order during rendering, which is only possible at the top level of components/hooks.

6. Corrupted node_modules or Incomplete Installation: Sometimes, the react package in your node_modules might be corrupted, or the installation process might have failed.

   • Diagnosis: Delete your node_modules folder and package-lock.json (or yarn.lock) file, then run npm install (or yarn install) again. Check the output for any installation errors related to react.
   • Fix: Reinstall dependencies: rm -rf node_modules package-lock.json && npm install (or rm -rf node_modules yarn.lock && yarn install).
   • Why it works: This ensures you have a clean, complete, and correctly installed version of the react package.

7. Using an Older Version of React: If you’re working with a very old project that hasn’t been updated, you might be using a version of React that doesn’t support hooks, or where useState was introduced differently. However, this is highly unlikely for the "is not a function" error specifically, as useState has been part of the public API since React 16.8.

   • Diagnosis: Check your package.json for the react version.
   • Fix: Upgrade React to a version that supports hooks (16.8+). This often involves updating other dependencies as well.
   • Why it works: Ensures compatibility with the modern React API that includes hooks.

After fixing the above, you might encounter a TypeError: X is undefined if you try to use a variable that wasn’t correctly imported or declared.