React-hot-loader: Composing HoCs causes component state to reset

[bywo]

First of all, thanks for the great writeup on how hot reloading works. It allowed me to narrow down the issue I was seeing.

Here's a branch with a repro case: https://github.com/byronmwong/react-hot-boilerplate/pull/1. The counter will reset if you change anything in that file.

When multiple HoCs are used without intermediate assignments, the babel plugin isn't able to get a hold of the intermediate components that are getting created by the functions. I imagine this issue would get hit most commonly through use of compose for HoCs, e.g.

export default compose(
  withBackgroundColor('green')
  withPadding('10px')
)(MyComponent)

I'm not sure if this is solvable through the current static analysis approach, but I figured it was worth asking. Thanks!

[nfcampos]

yeah I'm aware of this issue, but still haven't thought of a good way of detecting this in static analysis
(thanks for the repro btw)

[wmertens]

I encountered this issue with a single decorator as well, the @graphql decorator from react-apollo.

By assigning the decoration separately, hot-reload-with-state works.

I tried debugging by looking at the React timeline but I got no farther than that the decorator render function is called and afterwards the decorated component is unmounted and remounted, maybe because the decorated component class reference changed?

[calesce]

@wmertens yep supporting decorated components (and HoCs that are able to be detected statically) should be feasible, see discussion in #279.

[rogersp]

I'm experiencing the same state reset behavior, when calling react-redux connect() on the component returned inside my higher order component function (this line).

Interestingly, the state does not reset when using the master branch of react-hot-boilerplate.

Repro examples:

• State IS preserved (base: react-hot-boilerplate/master): https://github.com/rogersp/rhb-redux-hoc/tree/master
• State is NOT preserved (base:react-hot-boilerplate/next): https://github.com/rogersp/rhb-redux-hoc/tree/next

To clarify, the state is maintained for anything that comes from the redux store, but any state the wrapped component tracks internally is reset on hot reload.

[rogersp]

As a follow-up and presumably for the same reason, internal state is also lost for anything wrapped with redux-form.

[wmertens]

I wonder if that is related to what is described in
https://github.com/gaearon/react-deep-force-update/issues/2

On Thu, May 25, 2017, 4:59 AM Patrick Rogers [e-mail]
wrote:

As a follow-up and presumably for the same reason, internal state is also
lost for anything wrapped with redux-form.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gaearon/react-hot-loader/issues/378#issuecomment-303909165,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADWltT-_3E79My8cTBippJ6wVdarOd4ks5r9O6DgaJpZM4KDI50
.

[markpradhan]

@rogersp have the same issue

Returning an unconnected component that calls your hoc stores the return value and always returns that value instead is a nice workaround.

const devExport = (...args) =>
  class ConnectedHOCHelper extends PureComponent {
    constructor(props, context) {
      super(props, context)
      this.C = YOURACTUALHOC(...args)
    }

    render() {
      const { C } = this

      return <C {...this.props} />
    }
  }

export default (isDevEnv === true ? devExport : YOURACTUALHOC)

[gregberge]

Fixed in v4. Also added an example with heavy hoc usage.