getting error "TypeError: Cannot read properties of null (reading 'useState')" on useState usage react

Question

So I'm trying to use useState in my nextjs app, but as soon as I add in the line of code to initialize useState it throws a popup error with the error message: TypeError: Cannot read properties of null (reading 'useState')

Here is a simplified version of my code:

import { useState } from 'react'

export default function Home() {
    return (
        <div>
            <Transactions />
        </div>
    )
}



const Transactions = () => {

    const [state, setState] = useState('test')
...
}

React/Next versions I'm running:

"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"

Screenshot of error from chrome dev tools:

Any thoughts on what's causing this? Thanks

EDIT Very dumb bug on my end, issue was resolved by importing react...

Acidify

I can't repro with the simplified version of your code, so there's a good chance the problem is in the details. Could you post a full example? – Lobito

Repo link: github.com/bracesproul/Budget-Tracker/blob/main/pages/… – Acidify

@BraceSproul I have this error and I AM importing react. I'm using the latest nextjs, react and typescript. – Ignorance

Answer 1

Just define State inside the Home function

Achorn

lol, I made this mistake. Thanks duh! – Levina

Could you share the fixed code? – Canoodle

can you help with a brief explanation as the nested component can also be having state. – Sunny

Answer 2

If you are using Next 13 App router this could be happening if you are using an async function

Wrong:

"use client"

export default async function Page() {
    const [variable, setVariable] = useState();
}

Right:

"use client"

export default function Page() { //Remove Async Keyword
        const [variable, setVariable] = useState();
}

Pd

What if I need the function to be async though? – Recap

You need to use 'useEffect' to get the data and manage the page loading state using 'useState' @JackDamon – Pd

Answer 3

So I forked and cloned your github repo and was not able to reproduce the error on my system. One thing I found was in your navBar component you import

import Link from 'next/Link'

which threw me an error until I could change it next/link to lowercase

import Link from 'next/link'

What I would recommend doing is to reinstall react, just with a simple npm command to see if that fixes your problem. If not let me know!

npm uninstall react
npm install react@latest

Soso

Answer 4

May you use "hook" outside of the function component because hook does not work outside of the function

Breviary

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Baumann

Answer 5

This can also happen because of the way you export the function:

wrong:

export default YourComponent();

correct:

export default YourComponent;

Wire

Answer 6

Just create a folder called "hooks" add paste this code there. I was the same probleam and that worked for me

Burletta

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Baumann

Answer 7

Got the same error message and this line of code basically fixed it.

import React, { useState } from 'react';

Noticed that I had the incorrect import which was causing the issue on my end. Hope this helps.

Refectory

Answer 8

Mostly, the error is because useState is not being used inside the function that's being exported.
Just use useState inside a function and the issue will be solved!

Demagogic

Answer 9

use the function as

export default function Register () {
  const [credentials, setCredentials] = useState();

This work for you

Mccormick

Answer 10

Had the error even after importing react,usestate and even defined the usestate inside a function, but the actual issue was I was calling the function in the export line removed the () error resolved, Hope this helps.

Galinagalindo

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Baumann

Answer 11

If you have defined const [userName, setUserName] = useState(""); outside the component. Than this error may come.

Just move your const [userName, setUserName] = useState(""); inside your component.

Not working:

const [userName, setUserName] = useState("");

const AppLayout = () => {
  return (
      <div className="app">
        <Header />
        <Body />
      </div>
  );
};

Working:

const AppLayout = () => {
const [userName, setUserName] = useState("");
  return (
      <div className="app">
        <Header />
        <Body />
      </div>
  );
};

Intermit

Answer 12

For me, my /node_modules was corruped for some reason

rm -fr /node_modules
npm i

Wortman

Answer 13

I got the same error, in my case it was because of a library (ReactToastify or simply 'toast') I used. After you install this library you have to write after the closing in App.js. Hope that helps.

Augustinaaugustine

Answer 14

In my case, I had a git submodule in a subfolder. This submodule had its own node_modules. I had to remove them to fix this error.

Interestingly, this only occurred in the production build.

Plucky

Answer 15

I was developing a Shopify app and had the same issue.

In my case, I deleted the react folder from my_project\node_modules\@shopify\cli-kit\node_modules\react and re-run the app. It re-created the react folder by its own and fixed the problem.

Charlatanry

Answer 16

When migrating to next make sure you don't use any other Link except from next-js.

Couscous

Answer 17

Just reinstall the newest version react

npm install react@latest

Ceaseless