Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't perform a React state update on an unmounted component with React 17

See original GitHub issue

I’m seeing this warning on switching routes in my app, such that the RTF component is unmounted. This has only started occurring with React 17 - I didn’t observe it with React 16.x.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at ResizeContainer (https://localhost:3000/static/js/10.chunk.js:40975:5)
    at Canvas (https://localhost:3000/static/js/10.chunk.js:41016:5)
    ...

There have been no other changes made to the RTF component or routing logic in the app.

Using:

    "drei": "1.5.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-three-fiber": "5.1.4",
    "three": "^0.122.0",

Issue Analytics

State:
Created 3 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

2reactions

drcmdacommented, Nov 9, 2020

it came from react-use-measure, it should be fixed.

0reactions

drcmdacommented, Nov 7, 2020

a minimal codesandbox would be easier, something without so much setup and redirection. from what i understand this is a common problem in react 17 and can can easily creep into regular userland code, just have any async setstate and it happens. don’t wanna climb through a full routing setup just to find the starter causes it.