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 react@16.8.1 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?
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 versionEnsure 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-domIf 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",
...
}
}
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"
Fixed mine by calling React.useState(0).
If a react version is new enough, it just has to use React.useState.