Hot reload does not preserve component state

[trueter]

Hey folks

I stumbled across this today.

To reproduce: Clone from master, npm install.

• Add these to the Widgets View

 constructor(){
    super()
    this.state = {
      n: 0
    }
  }
  componentWillUnmount(){
    console.log("unmmount")
  }
  componentWillUpdate(){
    console.log("update")
  }

• Some logging output to the top of the render function:

console.log(this.state.n);

• And this to the render as e.g. as first child of the containing div.

<button onClick={ () => this.setState({ n : this.state.n + 1}) }>Update State</button>

When clicking the button the state is properly modified and the component re-renders. Each of these times componentWillUpdate is called. The issue appears when e.g. modifying the render function afterwards. Changing anything does trigger a hot reload, but afterwards the component does not update but unmounts and remounts. This calls the constructor and the state eventually gets reset.

As far as I know the component should not unmount. Someone on IRC suggested this might be related with a keying issue further up the tree, but I was not able to notice any differences in the react-ids in the DOM.

Thank you for providing this boilerplate and looking into this.

Cheers
Torsten

[erikras]

I've made a branch to investigate this.

[trueter]

Looks like this got fixed in the process of 91cfa1e
Thanks @stevoland!