Gatsby: React Hooks not working

[afucher]

Description

Describe the issue that you're seeing.

Steps to reproduce

Created a project using npx gatsby new
Added a useState command to the header component
Run npm run develop

code

Expected result

What should happen?
The application should run and show the gatsby base application

Actual result

What happened.
It shows an error about react hooks:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Environment

Run gatsby info --clipboard in your project directory and paste the output here.
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
Binaries:
Node: 10.15.1 - C:\programas\nodejs\node.EXE
npm: 6.4.1 - C:\programas\nodejsnpm.CMD
Languages:
Python: 3.7.4
Browsers:
Edge: 44.18362.329.0
npmPackages:
gatsby: ^2.15.7 => 2.15.7
gatsby-image: ^2.2.17 => 2.2.17
gatsby-plugin-manifest: ^2.2.14 => 2.2.14
gatsby-plugin-offline: ^2.2.10 => 2.2.10
gatsby-plugin-react-helmet: ^3.1.6 => 3.1.6
gatsby-plugin-sharp: ^2.2.19 => 2.2.19
gatsby-source-filesystem: ^2.1.21 => 2.1.21
gatsby-transformer-sharp: ^2.2.13 => 2.2.13

[kingingcole]

From your code, it shows you are not using hooks well. What's your intended use for calling just useHooks(false). As I could see, it wasn't referenced anywhere else in your component.

Also, according to React,

What does useState return? It returns a pair of values: the current state and a function that updates it. This is why we write const [count, setCount] = useState()

This is quite different from your own use of useState. An example should be something like const [variable, setVariable = useState(false), this depends on what you want to do.

[afucher]

I just added the minimal example, it doesn't make any difference to use or not the useState return variables. If you want, I can add the use, but it still show the same error.

[jonniebigodes]

@afucher can you expand the the use case? Because @kingingcole is technically right on what he said, you'll need a variable to access the current state and a function that will act as a setter for the next value which will be contained in the state. It's how it's implemented by react, not actually a gatsby issue. More on how hooks work and how useState works

[LekoArts]

I'm closing this issue as your errors are not related to Gatsby but to the misuse of React hooks itself as others have mentioned. Please continue to comment here if you need further help. Thanks!

[grnkvch]

I've faced the same issue, try to run through gitBash