Skip to content

Fix useResizeObserver loop limit exceeded warning #2891

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

Merged
merged 17 commits into from
Mar 14, 2023

Conversation

snowystinger
Copy link
Member

@snowystinger snowystinger commented Feb 26, 2022

Closes #1924

Current:
Use a raf to avoid unobserving and reobserving constantly

Old:
Uses solution from https://blog.elantha.com/resizeobserver-loop-limit-exceeded/
Story added is based on the code from the blog and it reproduces the issue. You can see this for yourself once this PR builds.

Someone pinged on the issue again and our project's complain about this periodically. I had a solution laying around so put it into a PR. This isn't a priority for our next release, but is a general nice to have.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Make sure ActionGroups still collapse as expected. Shouldn't see any warnings about loop limit exceeded.
Other components using it that should be verified in testing:
ActionGroup
ScrollView
SearchAutocomplete
Breadcrumbs
ButtonGroup
CardBase
ColorWheel
ComboBox
DatePicker
Picker
SearchWithin
Tabs

🧢 Your Project:

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

@adobe-bot
Copy link

@delphineli
Copy link

Hi anyone knows when this pr will be merge please ?

@rspbot
Copy link

rspbot commented Feb 7, 2023

@rspbot
Copy link

rspbot commented Feb 7, 2023

@rspbot
Copy link

rspbot commented Feb 21, 2023

@rspbot
Copy link

rspbot commented Mar 6, 2023

@rspbot
Copy link

rspbot commented Mar 8, 2023

@rspbot
Copy link

rspbot commented Mar 8, 2023

@rspbot
Copy link

rspbot commented Mar 10, 2023

@rspbot
Copy link

rspbot commented Mar 10, 2023

@rspbot
Copy link

rspbot commented Mar 11, 2023

@rspbot
Copy link

rspbot commented Mar 11, 2023

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

Copy link
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, confirmed the loop limit warning appeared before the fix in the new resize observer stories and goes away with the new changes. Also verified that other components seem to collapse/resize just fine still

Copy link
Member

@ktabors ktabors left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code makes sense and the new test prevents the error in Chrome, Firefox, and Safari

@snowystinger snowystinger merged commit 4a75768 into main Mar 14, 2023
@snowystinger snowystinger deleted the fix-resizeobserver-warning branch March 14, 2023 01:01
@evargast
Copy link
Contributor

@snowystinger this is great, thank you !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useResizeObserver not preventing Resize Observer errors in some situations
8 participants