Can't call "this.setState" on an unmounted component error.
See original GitHub issue- Check if updating to the latest Preact version resolves the issue
Describe the bug
This bug looks to be the same as #2056 but on a version 10.6.6
of Preact.
I am creating a modal (using @headlessui/react
and preact/compat
) and when you press the modals close button the following warning appears in the console.
debug.js:379 Can't call "this.setState" 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 the componentWillUnmount method.
It should be noted that the component works as expected but this warning is definitely something I would like to get fixed. Given there is a similar issue mentioned above I am assuming this is a bug in Preact but it could definitely be an issue on my side so let me know if that is the case.
To Reproduce
I had some issues getting CodeSandbox working so I created a Stackblitz.
Steps to reproduce the behavior:
- Go to demo application
- Right-click anywhere in the application preview and press “Inspect” and open the “Console” tab. You will probably want to clear it.
- Click on ‘Open Dialog’ to show the modal
- Observe no error in the console
- Click on ‘Got it, Thanks!’ or press
Esc
on your keyboard to close the modal - Observe the error above in the console.
Expected behavior No error should appear in the console.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Fixing React's “Called SetState() on an ... - How-To Geek
Seeing called setState() on an unmounted component in your browser console means the callback for an async operation is still running after a ......
Read more >React - setState() on unmounted component - Stack Overflow
The question is why am I getting this error when the component should already be mounted (as its being called from componentDidMount) I...
Read more >Avoid Memory Leak With React SetState On An Unmounted ...
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application....
Read more >Prevent React setState on unmounted Component
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application....
Read more >How to work with React the right way to avoid some common ...
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I believe this warning was removed in React. Dan Abrimov commented on the fact that the warning is a bit misleading and is very rarely an instance of actual memory leak, and the way people “get around” the warning doesn’t actually accomplish anything aside from warning suppressing.
https://github.com/facebook/react/pull/22114#issuecomment-929191048
Could be worth just removing the warning like React did.
FWIW, this is likely the result of a callback execution ordering difference between React and Preact. We’ve worked to reduce these in version 11, but I’m quite certain this one is harmless.
The debug warning is mainly designed to help point out possible memory leaks, but in this case that’s not the cause. I’m hopeful the change in 11 will remove whatever ordering issue is causing this specific warning, but for now I’d recommend ignoring it.