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

Posted by Carisa Kissane on Monday, May 20, 2024

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

3

13 Answers

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(); } 
2

Just define State inside the Home function

2

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 

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

1

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

wrong:

export default YourComponent(); 

correct:

export default YourComponent; 

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

1

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.

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!

use the function as

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

This work for you

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.

1

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> ); }; 

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

Just reinstall the newest version react

npm install react@latest 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobmpwaW2Bc4OOoJytrJmjtG6x0aumq2Wkrr2msdGrpqtlk5a7r7vTZqmemZRivbO7z56praGVqHqwsoynrKWkXaeyorDIp55mraOawLWt055kqA%3D%3D