Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Hooks issues in React 16.7 TypeError: Object(...) is not a function

I'm running the latest version of React and I'm getting this error enter image description here I have a simple Component using React Hooks as you can see here :

import React, { useState } from "react";

const AppFunction = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h1>Count:{count} </h1>
      <button onClick={incrementCount}>Click Me</button>
    </div>
  );
};

export default AppFunction;

Everything i've found about it on stack overflow says to upgrade the libraries but I have the latest version (16.7.0) and have tried the alpha version with no luck , what am i doing wrong?

package.json

"dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
like image 542
Dmitriy Avatar asked Dec 20 '18 02:12

Dmitriy


2 Answers

UPDATE

Hooks are now release as part of React v16.8.0. You can use hooks by upgrading your react version

See the docs for more details on the APIs


React 16.7.0 Doesn't contain hooks.

As per the React blog

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

In order to run hooks in your code, refer How to use new Feature Hooks in React?

like image 113
Shubham Khatri Avatar answered Sep 28 '22 20:09

Shubham Khatri


I tried to use the following in package.json but do not work.

"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2",

What worked is the following

"react": "next",
"react-dom": "next",

EDIT

React version v16.8.0 has Hooks inside. Use that.

like image 25
Petros Kyriakou Avatar answered Sep 28 '22 19:09

Petros Kyriakou