React TypeError useState

Shivan M.

—March 15, 2024

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.

Importing React Into Your Component

If you are using vanilla React without a framework (like Next.js), make sure you are importing React into your root component.

For example, the following component will result in the Cannot read properties of null (reading 'useState') error:

import { useState } from 'react'

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

The error occurs because we haven’t imported React into the component. Here’s how to fix it:

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

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

Next.js 13 App Router

If you are using Next.js 13 and the 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.

In Next.js 13, async/await is not yet supported for client components. 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:

"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:

"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
• React Hooks