gatsby: gatsby-develop | useState from react hooks doesn't work in development environment

Description

When running dev server, the state from react hooks is not working without any errors. It works, however, in production after compiling the files.

Steps to reproduce

Pull down https://github.com/aamorozov/gatsby-react-hooks;
Run yarn && gatsby develop;
When dev server is running, click on the button - the state is not getting updated here;
Run gatsby build && gatsby serve
When prod server is running, click on the button - the state is being updated correctly.

Expected result

The state from react-hooks should work in both dev/prod builds.

Actual result

The state from react-hooks is working only in production build.

Environment

System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.0.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0.3
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.28
    gatsby-plugin-flow: ^1.0.2 => 1.0.2
    gatsby-plugin-jsxstyle: ^0.0.3 => 0.0.3
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5
    gatsby-plugin-offline: ^2.0.5 => 2.0.7
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 2.4.3

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 15
Comments: 37 (36 by maintainers)

Links to this issue

javascript - React Hooks Error: Hooks can only be called inside the body of a function component - Stack Overflow

Commits related to this issue

fix: get React Hooks working! Add the `setConfig` fix from https://github.com/gatsbyjs/gatsby/issues/9489#issuecomment-434868882 to get Hooks working in develop mode using hot module reloading. This ... — committed to jlengstorf/gatsby-with-hooks by jlengstorf 6 years ago
Upgrade `react-hot-loader` to 4.6 (#10455) Fixes #9489 ~~The docs also [recommend](https://github.com/gaearon/react-hot-loader#react--dom) (but don't require) using a patched `react-dom`, but as ... — committed to gatsbyjs/gatsby by jgierer12 6 years ago
Upgrade `react-hot-loader` to 4.6 (#10455) Fixes #9489 ~~The docs also [recommend](https://github.com/gaearon/react-hot-loader#react--dom) (but don't require) using a patched `react-dom`, but as ... — committed to gpetrioli/gatsby by jgierer12 6 years ago

Most upvoted comments

This works, ~pending approval from @theKashey~ (approved):

import { setConfig } from 'react-hot-loader';

setConfig({ pureSFC: true });

Credit: https://github.com/gaearon/react-hot-loader/issues/1088#issuecomment-434862175

+23

wKovacs64 on Nov 13, 2018

Hey, I wrap the function with React.memo() and it works 😆

+15

ng-hai on Oct 29, 2018

React-Hot-Loader 4.6.0 should work with hooks out of the box. https://medium.com/@antonkorzunov/react-hot-loader-4-6-41f3ce76fb08

theKashey on Dec 13, 2018

Thanks for the heads up, @ooloth!

This isn’t an Official Statement™ by any means, but I‘d call it a safe bet to assume that Gatsby won’t ship any hacks to get Hooks working.

This issue will end up getting fixed upstream, and once there‘s a stable solution for hot reloading with Hooks — assuming it’s backward-compatible — we’ll bump the dependency and Hooks will Just Work.

In the meantime, the hacks to get Hooks support will need to be implemented on a per-project basis by the devs wanting to use them.

Hope that helps clear things up!

jlengstorf on Nov 20, 2018

Caused by https://github.com/gaearon/react-hot-loader/issues/1088

thorn0 on Oct 28, 2018

@jlengstorf nope, not on that project but that is really good to know, thanks !! I don’t think anyone is likely to make the same mistake I did but just in case… I was messing around with architecture and data transformation and I happened to transform a React Function Component into a simple function. Obviously enough, Hooks are only meant to be used in React Components and not normal functions but the error was a bit misleading and hooks are so small and …well, functional… that I forgot it was there. 😉 So everything is fine for me. Thanks again.

m4rrc0 on Feb 13, 2019

This thing was broken by RHL, and should be fixed by RHL. Beta version 4.5.1 - could solve everything, once you will apply RHL’s webpack-loader to your node_modules. https://github.com/gaearon/react-hot-loader/blob/7c0f9a04bce89801d387b277251c2b00da525534/README.md#-hot-labs-

theKashey on Nov 21, 2018

Enabling pureSFC is a good option. It affects the ability of RHL to forceUpdate result, so I could not guarantee that after HMR everything should be ok. Plus RHL internal will still fail to manage hooks, but this would not a fatal error.

theKashey on Nov 1, 2018

The more proper fix

import { cold } from 'react-hot-loader';
cold(MyComponent); // black list MyComponent. But state would be lost on update.

theKashey on Oct 29, 2018

Go for it, @jgierer12! Get you some Gatsby swag. 😉

wKovacs64 on Dec 13, 2018

Apparently, the forwardRef error I reported above was a bug in react-hot-loader which has been fixed (along with a few other issues) in react-hot-loader@4.5.2.

ooloth on Dec 6, 2018

@wKovacs64 you’re right–that does fix it! We won’t want to go that way as we want this to be a develop only feature. I’m looking into this now!

DSchau on Dec 5, 2018

The setConfig approach yields the same result as far as I can tell (not re-rendering when it should). 🤷‍♂️

wKovacs64 on Oct 30, 2018