score:111

Accepted answer

There could be many reasons, and most are due to version incompatibilites or using a ^ in package.json:

1. Ensure react and react-dom are of the same version

Ensure that you have also updated the react-dom package and it is of the same version as react. In general react and react-dom should always be the same version in package.json as the React team updates them together.

If you want to install React 16.7.0-alpha.2, check that you are not using the ^ as you will install 16.7 instead, which doesn't have hooks.

Example package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4", // Make sure version is same as react-dom
    "react-dom": "16.8.4",
    ...
  }
}

2. react-test-renderer is of the same version as react and react-dom

If you are using Jest, ensure that react-test-renderer is of the same version as react and react-dom:

Example package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-test-renderer": "16.8.4",
    ...
  }
}

score:-3

Use React and {useState}:

import React,{useState} from 'react';

const Renu = () => {
    const[heart,heartSet]= useState('renu'); 
    return(
        <h1>vikas love {heart}</h1>
    )
}

export default Renu;

score:1

I just updated to the latest version of react and react DOM, it works for me. Check React versions here

score:1

the same error occurred to me.

My mistake was: I used :

import {useState} from 'react/cjs/react.development'

you should use:

import {useState} from 'react'

score:2

Make sure you are using the hook correctly. it also works for me when you use it wrong but the error description is not enough.

 import React,{useState} from 'react';

 const ComponentName= () => {
   const[stateOne, setStateOne]= useState(initial); // right usage - []
   const{stateTwo, setStateTwo}= useState(initial); // wrong usage - {}
                                                                     
   useEffect(() => {
       setStateOne(value1);
       setStateTwo(value2);
   }, []);
}

export default ComponentName;

score:6

Now that react 16.7 (the one not containing hooks) is released you might get an error if you type ^16.7.0-alpha.0 with the leading ^ in your package.json.

For the version with hooks you have to omit the ^.

score:7

Fixed mine by calling React.useState(0).

If a react version is new enough, it just has to use React.useState.

score:9

You may get same error when using jest. So to fix the error I had to update react-test-renderer to have the same version as react and react-dom

yarn add -D react-test-renderer@next

Or

npm i react-test-renderer@next

All react, react-dom and react-test-renderer should contain same version

"react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0",
"react-test-renderer": "^16.7.0-alpha.0"

Related Query

More Query from same tag