Cannot preserve state of dynamically generated classes

[dallonf]

I just discovered a bit of a gotcha with react-proxy (it might have been somewhere higher in the react-transform stack, this is my best guess as to where the issue belongs).

If you create a component class dynamically, like this contrived example derived from the react-transform-boilerplate project:

var WeirdCounter = (() => {
  var randomNumber = Math.round(Math.random() * 100);
  return class WeirdCounter extends Component {
    // .. irrelevant code copied from Counter elided
    render() {
      return (
        <h1 style={{ color: this.props.color }}>
          {randomNumber} is the best number! ({this.props.increment}): {this.state.counter}
        </h1>
      );
    }
  }
})();

It will render and reload just fine, but its state will be reset each time.

I would have just submitted a PR and added this to "Known Limitations", but I have no idea how to describe it in one concise bullet point. I certainly don't expect this to be a simple fix, or an issue that has any priority whatsoever ;) Just thought that this was an interesting gotcha and wanted to share that with the community.

[gaearon]

This is not a problem with react-proxy per se—the problem is uniquely identifying such “component class instances” across hot reloads. I created gaearon/babel-plugin-react-transform#18 to track this.