-
Notifications
You must be signed in to change notification settings - Fork 729
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix debounced calls after unmount in responsive components #558
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks for the fix @claisne! Looks good overall but I had a couple of suggestions.
I think the build is failing for an unrelated reason, will try to get that fixed asap.
@@ -53,6 +53,7 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>( | |||
componentWillUnmount() { | |||
if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID); | |||
if (this.resizeObserver) this.resizeObserver.disconnect(); | |||
if (this.resize) this.resize.cancel(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ditto re removing the if (...)
statement since it's defined in the constructor.
also I think these need to be updated to this.debouncedResize
/this.debouncedResize.cancel()
because the unwrapped method wouldn't have the .cancel()
method (nice that we name this differently in every component 😱 )
@@ -37,6 +37,7 @@ export default function withScreenSize<Props extends WithScreenSizeProps = {}>( | |||
|
|||
componentWillUnmount() { | |||
window.removeEventListener('resize', this.handleResize, false); | |||
this.resize.cancel(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ditto re updating this to this.handleResize.cancel()
since the unwrapped method wouldn't have the .cancel()
method
@@ -62,6 +62,7 @@ export default class ParentSize extends React.Component< | |||
componentWillUnmount() { | |||
if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID); | |||
if (this.resizeObserver) this.resizeObserver.disconnect(); | |||
if (this.resize) this.resize.cancel(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the if (...)
statement needed here? since the debounced method is defined in the constructor I think this check is unneeded (versus animationFrameID
/resizeObserver
which can be null
or undefined
)
@claisne thanks for making the updates, I think if you rebase or merge the latest master the build should be fixed. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! Thanks for the contribution!
🐛 Bug Fix
Debounce calls can still fire after unmount, so we need to cancel them.