Component wrapped in reduxForm gets unmounted on HMR

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

[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

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