hot reload causing destroy #623

arolson101 · 2016-02-06T15:39:46Z

I'm using webpack-dev-server and I have hot reload working, but my form data gets destroyed because componentWillUnmount is called. From what I can gather from the hot loader demo unmount shouldn't be called. Is this expected, or have I hooked things up wrong?

Here is the callstack:

destroy (actions.js:23)
(anonymous function) (bindActionData.js:22)
(anonymous function) (bindActionCreators.js:14)
componentWillUnmount (createHigherOrd…mponent.js:115)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:243)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactChildReconciler.unmountChildren (ReactChildReconciler.js:115)
ReactMultiChild.Mixin.unmountChildren (ReactMultiChild.js:398)
ReactDOMComponent.Mixin.unmountComponent (ReactDOMComponent.js:911)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactChildReconciler.unmountChildren (ReactChildReconciler.js:115)
ReactMultiChild.Mixin.unmountChildren (ReactMultiChild.js:398)
ReactDOMComponent.Mixin.unmountComponent (ReactDOMComponent.js:911)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactChildReconciler.unmountChildren (ReactChildReconciler.js:115)
ReactMultiChild.Mixin.unmountChildren (ReactMultiChild.js:398)
ReactDOMComponent.Mixin.unmountComponent (ReactDOMComponent.js:911)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin.unmountComponent (ReactCompositeComponent.js:246)
ReactReconciler.unmountComponent (ReactReconciler.js:52)
ReactCompositeComponentMixin._updateRenderedComponent (ReactCompositeComponent.js:567)
ReactCompositeComponentMixin._performComponentUpdate (ReactCompositeComponent.js:544)
ReactCompositeComponentMixin.updateComponent (ReactCompositeComponent.js:473)
ReactCompositeComponent_updateComponent (ReactPerf.js:66)
ReactCompositeComponentMixin.receiveComponent (ReactCompositeComponent.js:405)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactChildReconciler.updateChildren (ReactChildReconciler.js:84)
ReactMultiChild.Mixin._reconcilerUpdateChildren (ReactMultiChild.js:216)
ReactMultiChild.Mixin._updateChildren (ReactMultiChild.js:351)
ReactMultiChild.Mixin.updateChildren (ReactMultiChild.js:326)
ReactDOMComponent.Mixin._updateDOMChildren (ReactDOMComponent.js:871)
ReactDOMComponent.Mixin.updateComponent (ReactDOMComponent.js:700)
ReactDOMComponent.Mixin.receiveComponent (ReactDOMComponent.js:645)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactCompositeComponentMixin._updateRenderedComponent (ReactCompositeComponent.js:562)
ReactCompositeComponentMixin._performComponentUpdate (ReactCompositeComponent.js:544)
ReactCompositeComponentMixin.updateComponent (ReactCompositeComponent.js:473)
ReactCompositeComponent_updateComponent (ReactPerf.js:66)
ReactCompositeComponentMixin.receiveComponent (ReactCompositeComponent.js:405)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactCompositeComponentMixin._updateRenderedComponent (ReactCompositeComponent.js:562)
ReactCompositeComponentMixin._performComponentUpdate (ReactCompositeComponent.js:544)
ReactCompositeComponentMixin.updateComponent (ReactCompositeComponent.js:473)
ReactCompositeComponent_updateComponent (ReactPerf.js:66)
ReactCompositeComponentMixin.receiveComponent (ReactCompositeComponent.js:405)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactCompositeComponentMixin._updateRenderedComponent (ReactCompositeComponent.js:562)
ReactCompositeComponentMixin._performComponentUpdate (ReactCompositeComponent.js:544)
ReactCompositeComponentMixin.updateComponent (ReactCompositeComponent.js:473)
ReactCompositeComponent_updateComponent (ReactPerf.js:66)
ReactCompositeComponentMixin.receiveComponent (ReactCompositeComponent.js:405)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactCompositeComponentMixin._updateRenderedComponent (ReactCompositeComponent.js:562)
ReactCompositeComponentMixin._performComponentUpdate (ReactCompositeComponent.js:544)
ReactCompositeComponentMixin.updateComponent (ReactCompositeComponent.js:473)
ReactCompositeComponent_updateComponent (ReactPerf.js:66)
ReactCompositeComponentMixin.receiveComponent (ReactCompositeComponent.js:405)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactChildReconciler.updateChildren (ReactChildReconciler.js:84)
ReactMultiChild.Mixin._reconcilerUpdateChildren (ReactMultiChild.js:216)
ReactMultiChild.Mixin._updateChildren (ReactMultiChild.js:351)
ReactMultiChild.Mixin.updateChildren (ReactMultiChild.js:326)
ReactDOMComponent.Mixin._updateDOMChildren (ReactDOMComponent.js:871)
ReactDOMComponent.Mixin.updateComponent (ReactDOMComponent.js:700)
ReactDOMComponent.Mixin.receiveComponent (ReactDOMComponent.js:645)
ReactReconciler.receiveComponent (ReactReconciler.js:87)
ReactCompositeComponentMixin._updateRenderedComponent (ReactCompositeComponent.js:562)
ReactCompositeComponentMixin._performComponentUpdate (ReactCompositeComponent.js:544)
ReactCompositeComponentMixin.updateComponent (ReactCompositeComponent.js:473)
ReactCompositeComponent_updateComponent (ReactPerf.js:66)
ReactCompositeComponentMixin.performUpdateIfNecessary (ReactCompositeComponent.js:421)
ReactReconciler.performUpdateIfNecessary (ReactReconciler.js:102)
runBatchedUpdates (ReactUpdates.js:129)
Mixin.perform (Transaction.js:136)
Mixin.perform (Transaction.js:136)
assign.perform (ReactUpdates.js:86)
flushBatchedUpdates (ReactUpdates.js:147)
ReactUpdates_flushBatchedUpdates (ReactPerf.js:66)
Mixin.closeAll (Transaction.js:202)
Mixin.perform (Transaction.js:149)
ReactDefaultBatchingStrategy.batchedUpdates (ReactDefaultBat…Strategy.js:62)
enqueueUpdate (ReactUpdates.js:176)
enqueueUpdate (ReactUpdateQueue.js:24)
ReactUpdateQueue.enqueueForceUpdate (ReactUpdateQueue.js:143)
ReactComponent.forceUpdate (ReactComponent.js:86)
forceUpdateIfPending (deepForceUpdate.js:18)
traverseRenderedChildren (traverseRenderedChildren.js:4)
traverseRenderedChildren (traverseRenderedChildren.js:7)
deepForceUpdate (deepForceUpdate.js:33)
forceUpdateAll (requestForceUpdateAll.js:27)

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

erikras · 2016-02-09T14:39:04Z

Oooh, interesting. I am seeing this as well. It didn't used to do this. But it does not look like a redux-form bug. Maybe you should report this as an issue on the React Hot Loader repo?

@gaearon, is calling componentWillUnmount() on hot reload the new default behavior going forward, or is it a bug?

gaearon · 2016-02-09T15:08:09Z

There is no new behavior, the repo has not been updated in months :-)
Please provide a project reproducing the issue. It is impossible to help based on a stack trace alone. Please publish a complete minimal example.

erikras · 2016-02-09T17:54:52Z

How I did it:

Clone the redux-form docs
npm install
npm run dev
Go to the Simple Form example
Fill in some fields
Modify src/examples/SimpleForm.js

It will hot reload and redux-form/DESTROY will be dispatched, which is only called in componentWillUnmount(), blowing away your form data.

It's not the most minimal example, but it's pretty simple to get running locally to replicate this issue.

dlwalsh · 2016-03-14T23:41:25Z

I'm having this issue with generic HMR as well.

If you're using HMR at the render point, as advocated in @gaearon's recent post, here's the workaround:

const store = configureStore();
const mountPoint = document.querySelector('[data-root]');

render(<Root store={store} />, mountPoint);

if (module.hot) {
  let persistentStore = store;
  module.hot.accept('src/Root', () => {
    const NextRoot = require('src/Root').default;
    persistentStore = configureStore(persistentStore.getState());
    render(<NextRoot store={persistentStore} />, mountPoint);
  });
}

dlwalsh · 2016-03-16T00:08:49Z

In fact there's an even simpler solution.

Just set destroyOnUnmount: !module.hot in the reduxForm() config.

gaearon · 2016-03-16T00:30:34Z

Trying to reproduce this. Running npm run dev in 4.2.0 folder:

npm run dev

> redux-form-examples@ dev /Users/dan/p/redux-form/4.2.0
> node ./node_modules/better-npm-run dev

running better-npm-run in /Users/dan/p/redux-form/4.2.0
Executing script: dev

to be executed: node webpack/webpack-dev-server.js 
fs.js:584
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open './.babelrc'
    at Error (native)

Running it in the root doesn’t work either:

npm run dev
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/iojs" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v5.3.0
npm ERR! npm  v3.3.12
npm ERR! path /Users/dan/p/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open '/Users/dan/p/package.json'

erikras · 2016-03-16T09:34:08Z

@gaearon Sorry that directory structure has changed in the interim. I've fixed it. Try again, in the 4.2.0 folder. Still shows the same behavior.

eliseumds · 2016-05-11T18:48:04Z

Any updates on this? Does it make sense to have destroyOnUnmount: !module.hot as default when NODE_ENV=development?

mmazzarolo · 2016-12-02T14:35:12Z

Hey guys, any news on this issue? Is destroyOnUnmount: !(__NODE_ENV__ === 'development' && module.hot) still the best solution?

sunnysingh · 2016-12-11T20:52:27Z

Is there a reason the commit that fixed this issue no longer exists in v6.3.2? 0b8dd94#diff-d749bb1257f721af37259e0346e623be

I'm currently using the destroyOnUnmount fix but there is no way to specify this globally (as far as I am aware of) so it seems hacky to add this option to every wrapped form.

adorum · 2017-04-07T13:38:40Z

Hi, any news why 0b8dd94#diff-d749bb1257f721af37259e0346e623be was reverted and is gone from master?

mojo5000 · 2017-04-29T02:33:42Z

I think this is what has been screwing me up. I'm using redux-form in a next.js project and have been tearing my hair out while my state disappears automagically with a hot reload... is this going to be put back in?

Per this thread it was removed: #947

gustavohenke · 2017-06-18T08:20:02Z

I'm closing this one as a duplicate of #2826 and #3005.
Please let's continue the discussion in #3005, since most of the information here don't apply anymore.

erikras · 2017-10-25T20:17:09Z

Fix published in v7.1.2.

lock · 2018-10-25T20:50:36Z

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.

ooflorent mentioned this issue May 12, 2016

Form state not persisted between hot reloads. #946

Closed

erikras added a commit that referenced this issue May 12, 2016

fix hot destroy problem #623

89903b9

erikras mentioned this issue May 12, 2016

Potential hot destroy fix #947

Merged

erikras added a commit that referenced this issue May 18, 2016

fix hot destroy problem #623

0b8dd94

This was referenced Apr 29, 2017

React Hot Loader unmounts form component #2826

Closed

HMR Issues vercel/next.js#1165

Closed

gustavohenke mentioned this issue Jun 18, 2017

Component wrapped in reduxForm gets unmounted on HMR #3005

Closed

gustavohenke closed this as completed Jun 18, 2017

tyscorp mentioned this issue Oct 10, 2017

Fix hot reloading destroying form #3506

Merged

lock bot locked as resolved and limited conversation to collaborators Oct 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

hot reload causing destroy #623

hot reload causing destroy #623

arolson101 commented Feb 6, 2016

erikras commented Feb 9, 2016

gaearon commented Feb 9, 2016

erikras commented Feb 9, 2016

dlwalsh commented Mar 14, 2016

dlwalsh commented Mar 16, 2016

gaearon commented Mar 16, 2016

erikras commented Mar 16, 2016

eliseumds commented May 11, 2016

mmazzarolo commented Dec 2, 2016

sunnysingh commented Dec 11, 2016

adorum commented Apr 7, 2017

mojo5000 commented Apr 29, 2017 •

edited

gustavohenke commented Jun 18, 2017

erikras commented Oct 25, 2017

lock bot commented Oct 25, 2018

hot reload causing destroy #623

hot reload causing destroy #623

Comments

arolson101 commented Feb 6, 2016

erikras commented Feb 9, 2016

gaearon commented Feb 9, 2016

erikras commented Feb 9, 2016

dlwalsh commented Mar 14, 2016

dlwalsh commented Mar 16, 2016

gaearon commented Mar 16, 2016

erikras commented Mar 16, 2016

eliseumds commented May 11, 2016

mmazzarolo commented Dec 2, 2016

sunnysingh commented Dec 11, 2016

adorum commented Apr 7, 2017

mojo5000 commented Apr 29, 2017 • edited

gustavohenke commented Jun 18, 2017

erikras commented Oct 25, 2017

lock bot commented Oct 25, 2018

mojo5000 commented Apr 29, 2017 •

edited