Does react-transform-hmr support pure function components

[dlmanning]

I'm not having any luck getting components defined as a pure function to hot-reload. The component in question:

export default function Light (props) {
  const { light, toggleLight, id } = props
  const status = light.state.on ? 'one' : 'off'

  return (
    <div>{light.name}
      <button onClick={() => toggleLight({ ...light, id })}>
        {status}
      </button>
    </div>
  )
}

I get this error in the console:

[HMR] Updated modules:
(index):25734 [HMR]  - ./app/components/light.js
(index):25734 [HMR]  - ./app/components/lights.js
(index):25739 [HMR] App is up to date.
(index):15049 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

Is this scenario supposed to work? Any idea what I'm doing wrong? Let me know if more context is needed.

[gaearon]

Not currently.

gaearon/react-proxy#12
gaearon/babel-plugin-react-transform#17

If you'd like to work on this let me know :-)

[dlmanning]

@gaearon : Thanks! I'll look into it and try to evaluate whether I have the time to dig into that.

Also wanted to say that everyone on my team really appreciates the work you've done for the community this year. Thanks! You've made all of our jobs easier and more fun.

[SpainTrain]

You've made all of our jobs easier and more fun.

Not on his team, but 👍 that

[ghost]

@gaearon I'd like to work on this. I'm about to start transitioning almost all of our components over to pure components so this would be handy :)

[onemanstartup]

@gaearon will it be possible with that to hot-reload component when changing getDefaultProps?

[gaearon]

will it be possible with that to hot-reload component when changing getDefaultProps?

I'm a bit confused—how are default props related to pure function components?

@danmartinez101

I'd like to work on this. I'm about to start transitioning almost all of our components over to pure components so this would be handy :)

I have some preliminary work in a branch, give me a few days and I'll try to push something to get started.

[onemanstartup]

@gaearon dunno :) I just wanted the feature and wanted to ask. When component pure and you change getDefaultProps it is not reloaded :(

[gaearon]

@onemanstartup

We don't currently support pure components at all. If it works for you, it's probably by accident. This is what this issue is about. 😉

I'm also not sure what getDefaultProps is. For pure components, as well as for ES6 classes, there is no getDefaultProps()—only static defaultProps.

[wmertens]

Just pointing out for interested parties that current development of this feature is happening in gaearon/babel-plugin-react-transform#34 - it's already mostly working it seems.

[gaearon]

Please track this in gaearon/babel-plugin-react-transform#57.

[gaearon]

React Hot Loader 3 supports functional components without destroying the state.
It supersedes both React Hot Loader and React Transform, and is built on lessons learned from both.
Check it out: gaearon/react-hot-boilerplate#61

[linus-amg]

hi @gaearon awesome project, congratulations. though im not developing with react i got inspired to use hmr in a backbone project i've got, im using gulp + rollupify + babelify + hbsfy + browserify + browserify-hmr plugin, now i wanted to see how i could implement a transform to re-render my views or templates, would you know of an easier starting point then react-transform-hmr?