TypeError dispatcher.useState is not a function when using React Hooks

  • A+
Category:Languages

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.7.0-alpha 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?

 


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 versions in package.json as the React team updates them together.

Example package.json:

{   ...   "dependencies": {     "react": "^16.7.0-alpha.0",     "react-dom": "^16.7.0-alpha.0",     ...   } } 

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: