findDOMNode() throws inside Suspense
See original GitHub issueDo you want to request a feature or report a bug?
Bug
What is the current behavior?
I have a component which listens for resize events (via a BlueprintJS ResizeSensor). When loading a component dynamically with lazy
/ Suspense
, an exception occurs as the resize sensor appears to be unmounted:
Uncaught Error: Unable to find node on an unmounted component.
at invariant (29.chunk.js:86295)
at findCurrentFiberUsingSlowPath (29.chunk.js:90628)
at findCurrentHostFiber (29.chunk.js:90640)
at findHostInstanceWithWarning (29.chunk.js:106349)
at findDOMNode (29.chunk.js:106869)
at ResizeSensor.componentDidUpdate (29.chunk.js:10535)
The resize sensor should be removing listeners on unmount.
Demo: https://codesandbox.io/s/n4241q075l Related: https://github.com/palantir/blueprint/issues/3141
What is the expected behavior?
No exception is thrown.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tested with:
- React 16.6.1, fails
- React 16.6.0, works
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:19 (10 by maintainers)
Top Results From Across the Web
ReactDOM – React
findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because...
Read more >Unable to find node on an unmounted component while code ...
This issue is caused by using findDOMNode for components wrapped in suspense .This is fixed in React 16.9.0.
Read more >Using strict mode in React 18: A guide to its new behaviors
Strict mode is trying to be future-ready with React's suspense-based architecture, making it more resilient for introspecting UI issues.
Read more >Getting rid of findDOMNode in your React application - Medium
As we can see, findDOMNode is deprecated in StrictMode. Its usage is discouraged and, possibly, it will be deleted in a future version....
Read more >10 Minute Read: Understanding React Suspense with Visuals ...
In a sentence, React Suspense lets you handle loading states in your ... When read() is called, the method either throws a Promise...
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
@gaearon @acdlite, Seems it still happens. ~I tried to get mini reproduce but it seems happened in complex environment.~
User report reproduce: https://codesandbox.io/s/antd-reproduction-template-sbsiz Quick click the nav item will throw with
Unable to find node on an unmounted component.
ref: https://github.com/ant-design/ant-design/issues/17016
Update:
Create a mini reproduce about this: #15857
@gaearon
any new updates?