Component wrapped in reduxForm gets unmounted on HMR

[butchyyyy]

Hello, i'm working on new react + redux + typescript + webpack2 starter kit. I'm using the react-hot-loader 3 beta for HMR which works fine... all my components that do not use redux-form get hot replaced without reloading the module or unmounting the component from DOM.
Once i wrap the component in reduxForm to sync form state into the redux, unfortunately my component stops hot reloading correcly - every hot update unmounts and mounts component to the DOM.

What is the current behavior?

HMR unmounts component wrapped in reduxForm

What is the expected behavior?

HMR should not unmount component

Sandbox Link

I've created a branch of my project where you can reproduce the issue:
git clone -b hmr-repro https://github.com/butchyyyy/arbes_react_poc
yarn install
yarn start
open https://localhost:8080
Make a change to the BankAcountContainer.tsx => Hot update performed without unmounting the component
Click "Add Payment Order" button next to the bank account, fill some value into the form and make a change to AddPaymentOrderContainer.tsx => Hot update performed with unmounting and mounting back the component emmiting destroy and loosing the from state in redux store.

What's your environment?

Library versions: https://github.com/butchyyyy/arbes_react_poc/blob/hmr-repro/package.json
Node 6.10.3
Windows 8.1 Pro
Google chrome: 58.0.3029.110 (64-bit)

Other information

I've tried various changes to my setup, but the problem was still there.
Unfortunately this is beyond my js knowledge so i don't know if it's redux-form, react-hot-loader or webpack problem, but the HMR works fine for everything but components wrapped in redux-form

I've tried to isolate the issue and in found out that in react-dom/lib/shouldUpdateReactComponent.js, at the line return nextType === 'object' && prevElement.type === nextElement.type && prevElement.key === nextElement.key;
this comparision returns false
prevElement.type === nextElement.type

[gustavohenke]

Hi @butchyyyy! Thanks for your report.
This is a never ending issue of Redux Form 😞, and certainly was reported before: #2826, #623.

#623 is the most popular one, but I think you have provided the most useful information so far -
given that we're in 06/2017 and using v6.8.0 😅

I'll close those issues and point them here.

[linde12]

There apparently already was a fix for this which is now removed in master, does anyone know why? See here

[butchyyyy]

That was imho more of a workaround than fix, you can do that via form configuration like this:

const form = reduxForm({ form: "someForm", destroyOnUnmount: module.hot ? false : true })(SomeForm)

Problem i see with this is that the app wil behave differently in prod / dev mode. While it "fixes" the problem of loosing data on hot module replacement, it introduces another problem of data not being destroyed when you unmount the component by e.g. navigating to another view => you have to somehow handle form reset in dev mode when you navigate back.

[linde12]

Yes, of course, but i'd like to avoid doing that for my forms. But i also understand that it's a workaround. There seems to be no easy way of solving this. How did it work with hmre?

Do you know why is componentWillUnmount being called in the first place?

[gustavohenke]

Very likely that this is the reason: gaearon/react-hot-loader#304

[gabrielmicko]

If I use destroyOnUnmount the value will stay the same, but I can no longer edit the input value. :(

[gabrielmicko]

There is a bug in the react-redux lib which caused my problem: gaearon/react-hot-loader#492. Going back to 4.4.6 fixed my problem, now I am going to try react-redux again.

[gabrielmicko]

As I see redux-form uses react-redux 5.0.4 which might have the same bug.

[linde12]

For me, using the deprecated react-hmre, was the simplest alternative. It might have been deprecated a bit too early, since the alternative(react-hot-loader) still has these problems.

[GenoD]

Hey guys, is there an update on this issue?

[erikras]

Fix published in v7.1.2.

[Memfisrain]

@erikras Hello, I've updated to 7.1.2 version and it seems like component with redux-form wrapper still unmounted. Could you send a link to working example? Thank you

[moimael]

Still have the issue with latest redux form.

[daraclare]

Hi, I'm also still having this issue, is there some configs we need to change?

[Rohmin]

@erikras Is there any planned fix for this?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.