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

aamorozov · 2018-10-28T02:25:47Z

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

The text was updated successfully, but these errors were encountered:

thorn0 · 2018-10-28T17:13:24Z

Caused by gaearon/react-hot-loader#1088

ng-hai · 2018-10-29T11:10:33Z

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

theKashey · 2018-10-29T21:29:52Z

The more proper fix

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

wKovacs64 · 2018-10-29T22:28:11Z

Hmm, cold(MyComponent) seems to get around potential Hooks can only be called inside the body of a function component errors, but calling the setter function returned from useState is not triggering a re-render when it should. The same component re-renders as expected when wrapped in React.memo instead (understood that it's not the fix, just noting the differences).

Edit: here's a reproduction - maybe I'm just doing something dumb?

https://codesandbox.io/s/1zvrvq5k5j

jlengstorf · 2018-10-30T16:07:44Z

Potential automated fix? gaearon/react-hot-loader#1088 (comment)

wKovacs64 · 2018-10-30T16:31:05Z

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

wKovacs64 · 2018-10-31T22:25:40Z

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

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

setConfig({ pureSFC: true });

Credit: gaearon/react-hot-loader#1088 (comment)

jlengstorf · 2018-11-01T00:19:51Z

Yeah! Just confirmed it by modifying your original Codesandbox: https://codesandbox.io/s/rjqy5y6q3n

theKashey · 2018-11-01T02:49:00Z

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.

Add the `setConfig` fix from gatsbyjs/gatsby#9489 (comment) to get Hooks working in develop mode using hot module reloading. This may cause issues where the data gets out of sync, but it’s the best we can hope for right now.

ooloth · 2018-11-19T22:41:13Z

The pureSFC solution is great except that it causes react-spring to throw the following error:

Function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `AnimatedComponent`.

As a result, I've had to switch back to wrapping functions that use hooks with React.memo().

Thought I'd share in case any decisions are being made about how to permanently enable hooks for Gatsby users.

jlengstorf · 2018-11-20T03:00:02Z

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!

theKashey · 2018-11-21T00:50:37Z

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-

ooloth · 2018-12-04T18:14:07Z

Hmm...

So, looks like Gatsby did end up deciding to ship a pureSFC hack that causes react-spring to throw the errors described in my comment above.

I'll check in with react-spring about whether this error is actually a concern in practice, but I just wanted to identify this here in the meantime.

wKovacs64 · 2018-12-04T19:13:54Z

Is #10259 supposed to be enough? It still doesn't work for me unless I call setConfig myself.

gatsby@2.0.62
react-hot-loader@4.5.1

DSchau · 2018-12-04T19:15:37Z

@wKovacs64 yeah - you can check out my repo which seems to work just fine for me.

Does it not work for you?

https://github.com/dschau/gatsby-react-hooks

DSchau · 2018-12-04T19:17:30Z

@ooloth whoops; sorry about that! I suppose a positive thing (for now) is that the error can be safely ignored as it's not impacting functionality.

It does sound like an issue with react-spring (or perhaps RHL), unfortunately, so let us know how we can help resolve that!

wKovacs64 · 2018-12-04T20:10:20Z

@wKovacs64 yeah - you can check out my repo which seems to work just fine for me.

Does it not work for you?

https://github.com/dschau/gatsby-react-hooks

OK so it works alone, but not in my app. Sigh. 🙄 Will continue to narrow it down.

ooloth · 2018-12-04T20:11:20Z

@DSchau Yeah, it's probably fine!

Always mildly alarming to see the console turn red lol, so just wanted to check. 😳

wKovacs64 · 2018-12-04T22:20:57Z

@DSchau It appears hooks aren't working in pages/*, as odd as that sounds. Check out my fork of your example repo where I track the counter state directly in page-2.js (edit: fork deleted now that it's been resolved).

wKovacs64 · 2018-12-05T03:28:12Z

@DSchau I know nothing about the cache-dir portion of Gatsby internals, so I don't know if this is the right place for it or not, but if I move it from app.js to gatsby-browser-entry.js (and make Anton's suggested change while doing so), it seems to fix things.

gatsby-browser-entry.js:

setConfig({
  pureSFC: true,
  pureRender: true,
})

DSchau · 2018-12-05T18:48:22Z

@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!

ooloth · 2018-12-06T13:43:14Z

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.

wKovacs64 · 2018-12-12T16:39:52Z

@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!

Any word on this, @DSchau?

theKashey · 2018-12-13T11:45:08Z

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

DSchau · 2018-12-13T15:29:45Z

@theKashey that's excellent! I'll check this out later this afternoon unless someone wants to jump on this :)

jgierer12 · 2018-12-13T16:01:12Z

@DSchau Upgrading doesn't look too complicated. I will open a PR soon if you don't mind 😃

wKovacs64 · 2018-12-13T16:02:42Z

@jgierer12 I was just about to push it, but you can if you'd rather. :)

DSchau · 2018-12-13T16:03:56Z

@jgierer12 not only do I not mind, that would be great :) Please do!

@wKovacs64 @jgierer12 either of you feel free to open, and just reference this issue where we can all take a look!

wKovacs64 · 2018-12-13T16:10:27Z

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

jgierer12 · 2018-12-13T16:29:08Z

#10455 opened

@wKovacs64 I already got some - but thanks anyways 💜

@wKovacs64

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 I understand it that would override the user's `react-dom` version we have as a peer dependency so I left it out.~~ ➡️ 3894f0a /cc @wKovacs64

@wKovacs64

Fixes gatsbyjs#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 I understand it that would override the user's `react-dom` version we have as a peer dependency so I left it out.~~ ➡️ gatsbyjs@3894f0a /cc @wKovacs64

m4rrc0 · 2019-02-12T10:57:36Z

Which version of Gatsby is this fix applied to?
I still see Hooks can only be called inside the body of a function component with Gatsby@^2.0.118

jgierer12 · 2019-02-12T11:27:16Z

@MarcCoet this was published in gatsby@2.0.69. If you are still experiencing issues with hooks I recommend you open a new issue and provide reproduction steps and the output of gatsby info --clipboard.

m4rrc0 · 2019-02-12T12:29:05Z

Thanks @jgierer12 . That is what I thought. I will dig a bit more.
That is probably just me doing silly stuff.

jlengstorf · 2019-02-12T14:32:00Z

@MarcCoet are you using yarn link by chance? I ran into that issue and it only happens to me when I linked packages.

jlengstorf · 2019-02-12T14:32:56Z

Apparently this is a known and expected bug? facebook/react#14257

m4rrc0 · 2019-02-13T19:29:44Z

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

Psycarlo · 2023-09-27T14:45:39Z

I was using useState and getting this problem.
I used useMemo instead

thorn0 added the type: upstream Issues outside of Gatsby's control, caused by dependencies label Oct 28, 2018

harisvsulaiman mentioned this issue Oct 29, 2018

[React Hooks] Incompatibility with react-hot-loader gaearon/react-hot-loader#1088

Closed

jlengstorf mentioned this issue Nov 2, 2018

[www/showcase] Improve shadow indicating overscroll #6735

Closed

DSchau mentioned this issue Dec 3, 2018

feat(gatsby): update react-hot-loader dependency to enable hooks #10259

Merged

pieh closed this as completed in #10259 Dec 4, 2018

ooloth mentioned this issue Dec 4, 2018

Bug: Trail throws ref error in HMR environment pmndrs/react-spring#349

Closed

jgierer12 mentioned this issue Dec 13, 2018

Upgrade react-hot-loader to 4.6 #10455

Merged

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

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

Comments

aamorozov commented Oct 28, 2018 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

Environment

thorn0 commented Oct 28, 2018

ng-hai commented Oct 29, 2018

theKashey commented Oct 29, 2018 • edited Loading

wKovacs64 commented Oct 29, 2018 • edited Loading

jlengstorf commented Oct 30, 2018

wKovacs64 commented Oct 30, 2018

wKovacs64 commented Oct 31, 2018 • edited Loading

jlengstorf commented Nov 1, 2018

theKashey commented Nov 1, 2018

ooloth commented Nov 19, 2018

jlengstorf commented Nov 20, 2018

theKashey commented Nov 21, 2018

ooloth commented Dec 4, 2018

wKovacs64 commented Dec 4, 2018 • edited Loading

DSchau commented Dec 4, 2018

DSchau commented Dec 4, 2018 • edited Loading

wKovacs64 commented Dec 4, 2018 • edited Loading

ooloth commented Dec 4, 2018

wKovacs64 commented Dec 4, 2018 • edited Loading

wKovacs64 commented Dec 5, 2018

DSchau commented Dec 5, 2018

ooloth commented Dec 6, 2018

wKovacs64 commented Dec 12, 2018

theKashey commented Dec 13, 2018

DSchau commented Dec 13, 2018

jgierer12 commented Dec 13, 2018

wKovacs64 commented Dec 13, 2018

DSchau commented Dec 13, 2018

wKovacs64 commented Dec 13, 2018

jgierer12 commented Dec 13, 2018 • edited Loading

m4rrc0 commented Feb 12, 2019

jgierer12 commented Feb 12, 2019

m4rrc0 commented Feb 12, 2019

jlengstorf commented Feb 12, 2019

jlengstorf commented Feb 12, 2019

m4rrc0 commented Feb 13, 2019

Psycarlo commented Sep 27, 2023

aamorozov commented Oct 28, 2018 •

edited

Loading

theKashey commented Oct 29, 2018 •

edited

Loading

wKovacs64 commented Oct 29, 2018 •

edited

Loading

wKovacs64 commented Oct 31, 2018 •

edited

Loading

wKovacs64 commented Dec 4, 2018 •

edited

Loading

DSchau commented Dec 4, 2018 •

edited

Loading

wKovacs64 commented Dec 4, 2018 •

edited

Loading

wKovacs64 commented Dec 4, 2018 •

edited

Loading

jgierer12 commented Dec 13, 2018 •

edited

Loading