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...
313 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(); }
2Just define State inside the Home function
2So 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
1This 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
1Got 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.
1If 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