Question RE: adding/removing hooks...

[drather19]

I've been trying this plugin out on a few CRA-based projects (based on steps mentioned here). So far, things work well in terms of preserving state during development as I edit my components and hooks.

Question: Anytime I add or remove hooks, I get the an error stating that the number of hooks has changed between renders. The component is not re-mounted. I have to force a subsequent reload to recover. Is this the expected behavior at the moment?

Expectation: Similar to the behavior when using Dan's old wonky-scripts experiment, adding/removing hooks should gracefully force a remount of the component if necessary rather than just bubbling the error all the way up.

I see the same behavior if I eject the CRA app and manually edit the webpack config per the README as well as if I use the feature branch version that hasn't yet been merged back to master.

Thanks for the work being put into bringing such a great React feature to web setups!

[pmmmwh]

Hey! Thanks for the issue.

I just shipped v0.1.0 (on npm) - I tested with the latest master and I wasn't able to reproduce what you're mentioning. Can you try it out and see if it works?

[drather19]

I tried again with the latest released version and on master (nice overlay!), but do still see things error out when I add/remove hooks. Sorry for not adding a simple test, but simply adding/remove the following from a React.FC triggers the error overlay:

const callback = React.useCallback(() => {}, []);

It's not a big deal at this point (just an extra reload I can trigger by making more edits). I was mainly curious about whether this is the expected normal behavior.

Thanks!

[pmmmwh]

I tried again with the latest released version and on master (nice overlay!), but do still see things error out when I add/remove hooks. Sorry for not adding a simple test, but simply adding/remove the following from a React.FC triggers the error overlay:

const callback = React.useCallback(() => {}, []);

It's not a big deal at this point (just an extra reload I can trigger by making more edits). I was mainly curious about whether this is the expected normal behavior.

Thanks!

I'll have to check if I did something wrong. I am pretty sure state/reducer/refs work, let me check.

[gaearon]

I was mainly curious about whether this is the expected normal behavior.

No

[pmmmwh]

I tried again with the latest released version and on master (nice overlay!), but do still see things error out when I add/remove hooks. Sorry for not adding a simple test, but simply adding/remove the following from a React.FC triggers the error overlay:

const callback = React.useCallback(() => {}, []);

It's not a big deal at this point (just an extra reload I can trigger by making more edits). I was mainly curious about whether this is the expected normal behavior.

Thanks!

I couldn't reproduce this in a normal webpack app. I guess it might have something to do with integration between this and CRA. #7

[drather19]

As mentioned in #25, I can resolve this in my CRA app by setting webpackConfig.optimization.runtimeChunk = false; via craco. Now everything seems to be working like a charm!

[pmmmwh]

Fixed in v0.1.3 🎉