[SOLVED] React Component Three JS UNMOUNT

Questions
1

Hi, I’m using React and THREE js together for a multi page web application and I’m having issues when going from a component that has THREE js to one that doesn’t. The components don’t seem to be unmounting properly and an asynchronous call, designed to help resize my renderer, keeps causing the error. In other words, when I go from my

Home (Three JS component) ---- > About Page (no THREE JS)

And I try to resize my About page, it triggers an error in my THREE JS component like so:

    151 | updateDimensions(){
> 152 |     this.renderer.setSize(this.mount.clientWidth, this.mount.clientHeight);
 | 153 |  ^  this.camera.aspect = this.mount.clientWidth / this.mount.clientHeight;
   154 |     this.camera.updateProjectionMatrix();
   155 | }

Here is my code for my unmounting / update dimensions function

    componentWillUnmount() {
        window.removeEventListener("resize", this.handleResize);
        window.removeEventListener("resize", this.updateDimensions);
        this.stop();
        this.loader = null;
        this.scene = null;
        this.camera = null;
        this.controls = null;
        this.mount.removeChild(this.renderer.domElement);
    }


    updateDimensions(){
        this.renderer.setSize(this.mount.clientWidth, this.mount.clientHeight);
        this.camera.aspect = this.mount.clientWidth / this.mount.clientHeight;
        this.camera.updateProjectionMatrix();
    }

Does anyone have any ideas on how to fix this? I try to remove the event listeners for resize but its not working.

2

Do you mind providing a live example that demonstrates the issue? Debugging might be the easiest way to find the problem.

3

I think I figured it out! I checked to see if the mount was null before trying to change it in my updateDimensions(). Highly reccomend if you’re using React and Three js!

    updateDimensions(){
        if (this.mount !== null){
            this.renderer.setSize(this.mount.clientWidth, this.mount.clientHeight);
            this.camera.aspect = this.mount.clientWidth / this.mount.clientHeight;
            this.camera.updateProjectionMatrix();
        }
    }