Izzimach / react-three-legacy

React bindings to create and control a 3D scene using three.js
Other
1.52k stars 128 forks source link

React warning about perf measurement code #101

Closed noveyak closed 7 years ago

noveyak commented 7 years ago

When the react-three Renderer unmounts, if a child specifies a componentWillUnmount function (regardless of content), I see this warning below. It doesn't happen if there is no componentWillUnmount function defined.

warning.js:36 Warning: There is an internal error in the React performance measurement code. Did not expect componentWillUnmount timer to start while componentWillUnmount timer is still in progress for another instance.

Sample structure of code

<Renderer
  height={this.props.dimensions.height}
  width={this.props.dimensions.width}
>
  <Scene
    camera="maincamera"
    orbitControls={CameraControls}
    height={this.props.dimensions.height}
    width={this.props.dimensions.width}
  >
    <OrbitCamera
      position={cameraPos}
    />
    <MyCustomComponent />
  </Scene>
</Renderer>

And for MyCustomComponent

export default React.createClass({
  componentWillUnmount() {
    // Nothing has to be in here for it to cause errors
  }
  render() {
    return (
      <Object3D>
        <Mesh />
      </Object3D>
    )
  }
});

This problem seems to go away if I remove this.unmountChildren(); from /src/components/THREERenderer.js in the componentWillUnmount method

Is this necessary? By default I thought react will unmount children but not sure if this is needed for the react-hotloader logic a couple lines above

Thanks!

Izzimach commented 7 years ago

Yeah, I don't think that this.unmountChildren() should be there. That is probably leftover from the time when Renderer was a primitive component (created with createTHREEComponent) instead of a composite (created with React.createClass).

I'll remove it in the dev branch for now to see if anything breaks.