Hook state

[dmarkow]

Description

Saving a file using hooks (specifically useState) can sometimes unmount/remount the component. This only started happening after 4.12.0

Expected behavior

State should be preserved across hot reloads (which it did up to and including 4.12.0).

Actual behavior

State is reset since version 4.12.1

Environment

React Hot Loader version: 4.12.6

Run these commands in the project folder and fill in their results:

1. node -v: v12.6.0
2. npm -v: 6.9.0

Then, specify:

1. Operating system: macOS 10.14.5
2. Browser and version: Chrome 75.0.3770.100

Reproducible Demo

https://github.com/dmarkow/react-hot-loader-hooks-issue

Run the start-working script to launch with 4.12.0 which works fine. Run the start-broken script to launch with 4.12.6 which is broken.

Change something inside the Counter.js file (e.g. add some text to the "Counter: " output) and save. The first save it'll update the text and keep the counter running. However, save again without changing anything and it'll reset the counter and print the "Unmounting" message showing that the component got remounted.

[theKashey]

yarn + yarn start-broken == working 🤷‍♂️
yarn + yarn start-working == working as well 🤷‍♂️

However, save again without changing anything and it'll reset the counter and print the "Unmounting" message showing that the component got remounted.

But I could not save anything without changing something.
Could you please provide your console output?

[theKashey]

😒 saw "unmounting" in the console once. So that's possible.

[theKashey]

Problem found, I am not sure why that's the problem for you - it's really hard to trigger it - you have to apply two hot updates almost simultaneously.
Replacement is not made synchronously - there is a "window" where it could work. If you out of the window - logic is disabled, and if elements did not match - then goodby.

4.12.1 simplifies this logic, removing some comparisons when "window of opportunity" is not open, and look like that was a mistake. Dam, 4.12.1 was really tough release - so many things went wrong. But, you know - so many things it fixed.

[dmarkow]

Weird, for me just hitting CMD+S in VS Code with no changes still re-writes the file triggering webpack to update. And for me, it doesn't have to be quickly -- run the app, make a change and save, the timer doesn't get reset. Wait 10 seconds, then hit CMD+S again on the file, the timer resets.

[dmarkow]

@theKashey 4.12.7 works great, thank you!