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

Question

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?

Nazar

Answer 1

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",
    ...
  }
}

Nazar

+1 for the Also check that you are not using the ^ as you will install 16.7 instead, which doesn't have hooks. Much appreciated, thank you. – Interclavicle

I'm getting this even with 16.8.1 and a NPM force install. – Janitajanith

@YangshunTay #54609032 – Janitajanith

No, still it didn't worked ! Can you give us the fiddler where you did the same and it worked for you? – Reckoner

Thank you. I had added "^" for the react version. Removing it could solve this issue. – Giffard

Answer 2

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"

Fabliau

Answer 3

Fixed mine by calling React.useState(0).

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

Harrison

Thanks for this! Because of your answer, I rechecked the line where I called { useEffect, useState }. Weird but the module 'react' got updated to 'react-redux'. – Ginnifer

Answer 4

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 ^.

Stoplight

Answer 5

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;

Cotinga

This is exactly what I did wrong -- I accidentally put curly braces instead of square brackets. Thanks @hknzbyn. – Tanyatanzania

Answer 6

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

Lancastrian

Answer 7

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'

Preparatory

Answer 8

if yangshun-tay does not satisfy your case and you are using submodule or child module, just use npm dedupe this command will look to existing package.json start with your parent to child into leap child and merge all duplicated modules and put it into root node_modules same level directory with your parent package.json.

here is the reference for npm-dedupe

Vav

Answer 9

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;

Truett