TypeError dispatcher.useState is not a function when using React Hooks
JavascriptReactjsReact HooksJavascript Problem Overview
I have this component:
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default App;
as I want to try out the new React hooks proposal by installing [email protected]
in my package.json
, but I'm getting an error:
TypeError: dispatcher.useState is not a function
2 | import ReactDOM from "react-dom";
3 |
4 | function App() {
> 5 | const [count, setCount] = useState(0);
| ^
6 | useEffect(() => {
7 | document.title = `You clicked ${count} times`;
8 | });
What did I do wrong?
Javascript Solutions
Solution 1 - Javascript
There could be many reasons, and most are due to version incompatibilites or using a ^
in package.json
:
react
and react-dom
are of the same version
1. Ensure 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",
...
}
}
react-test-renderer
is of the same version as react
and react-dom
2. 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",
...
}
}
Solution 2 - Javascript
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"
Solution 3 - Javascript
Fixed mine by calling React.useState(0)
.
If a react version is new enough, it just has to use React.useState
.
Solution 4 - Javascript
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 ^
.
Solution 5 - Javascript
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;
Solution 6 - Javascript
I just updated to the latest version of react and react DOM, it works for me. Check React versions here
Solution 7 - Javascript
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'
Solution 8 - Javascript
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;