React TypeError useState

Shivan M.

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.

Get Started With Sentry

Get actionable, code-level insights to resolve React performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a React project and note your DSN

  3. Grab the Sentry React SDK

npm install @sentry/react
  1. Configure your DSN
import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; import App from "./App"; Sentry.init({ dsn: "https://<key><project>" }); ReactDOM.render(<App />, document.getElementById("root"));

Check our documentation for the latest instructions.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.