# React TypeError Cannot Read Properties of Null useState

> Fix the Cannot read properties of null reading useState error caused by duplicate React versions, hooks called outside a component, or async client components

**URL:** https://sentry.io/answers/react-typeerror-usestate/

---

## The Problem

When using `useState` in React, you might encounter the following error:

```
TypeError: Cannot read properties of null (reading 'useState')
```

This error can occur for different reasons depending on your application setup and framework version. 

## The Solution

Let's outline a few things you should check to ensure your code is structured correctly and that you're set up to use React hooks.

### Duplicate or Mismatched React Versions

The most common cause of this error is having more than one copy of React in your app, or mismatched versions of `react` and `react-dom`. React's hooks rely on an internal dispatcher that's only set during render; if your bundle pulls in two separate copies of React (often through a dependency's own nested `node_modules`), a hook call can end up reading the dispatcher from the wrong copy, which is `null`.

Check for duplicate installs and make sure `react` and `react-dom` are on matching versions:

```bash
npm ls react react-dom
```

If you find duplicates, deduplicate them (`npm dedupe`) or add a resolution/alias in your bundler config so only one copy of React is used.

### Calling Hooks Outside a Component

React hooks can only be called at the top level of a function component or a custom hook. Calling `useState` in the module scope, inside a regular function, or conditionally will also produce this error, since React has no active render to attach the state to. See the "Invalid Function Export" example further down for a concrete case of this.

### Importing React Into Your Component

If you're using an older toolchain without the automatic JSX runtime (React 17+), or a bundler that isn't set up to use it, make sure you are importing React into your root component. Since React 17, most frameworks (Next.js, Vite, Create React App) use the automatic JSX transform by default and don't require this import, so this is only a fix for legacy or manually configured setups.

For example, the following component could result in the `Cannot read properties of null (reading 'useState')` error under an older, non-automatic JSX setup:

```jsx
import { useState } from 'react'

export default function Home() {
  const [myState, setMyState] = useState("hello")
  return (
    <div>
      {myState}
    </div>
  )
}
```

Here's how to fix it in that scenario:

```jsx
import React from 'react';
import { useState } from 'react'

export default function Home() {
  const [myState, setMyState] = useState("hello")
  return (
    <div>
      {myState}
    </div>
  )
}
```

### Next.js App Router: Async Client Components

If you're using the Next.js App Router, you might get this error if you've marked a client component as `async` and then tried to use the `useState` hook in it.

`async/await` is not supported for client components — this is a permanent restriction of the App Router's architecture, not a temporary gap. If your component is marked as `async`, either remove the `async` keyword or include the `use client` directive if you need it to be an `async` component:

```jsx
"use client";

export default async function MyComponent() {
  const [myState, setMyState] = useState();
  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}
```

### Client Hook in Server Component

In Next.js, you cannot use client-side hooks in server components. In Next.js 13 with the App Router, components are server components by default. You may encounter an error with `useState` if you attempt to use it in a server component.

You can solve this by adding the `use client` directive to the component that uses the `useState` hook, or extract the `useState` usage in a client component and use it in the server component.

### Invalid Function Export

You may encounter this error if you put the `useState` hook outside the body of your function.

React hooks can only be called within the body of a function.

In the following code, the `useState` hook is used outside the body of the `MyComponent` function, resulting in the error:

```jsx
"use client";

import { useState } from 'react';

const [myState, setMyState] = useState();

function MyComponent() {
  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}

export default MyComponent;
```

## Further Reading

Using hooks correctly in React and Next.js can be challenging at first. The React and Next.js documentation provides useful examples of hook usage and the common situations that can cause you to stumble.

- [React Client Hook in Server Component](https://nextjs.org/docs/messages/react-client-hook-in-server-component)
- [React Hooks](https://react.dev/reference/react/hooks)
- [No async Client Component](https://nextjs.org/docs/messages/no-async-client-component)

---

*Source: [sentry.io/answers/react-typeerror-usestate/](https://sentry.io/answers/react-typeerror-usestate/)*