Sentry Answers>React>

React TypeError useState

React TypeError useState

Shivan M.

The ProblemJump To Solution

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

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
"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:

Click to Copy
"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.

  • Syntax.fmReact Server Components
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Loved by over 4 million developers and more than 100,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.

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