Skip to content
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: reduce layout trashing #1369

Merged
merged 6 commits into from
Jul 11, 2024
Merged

fix: reduce layout trashing #1369

merged 6 commits into from
Jul 11, 2024

Conversation

stipsan
Copy link
Member

@stipsan stipsan commented Jul 10, 2024

This is not a complete fix, but it reduces layout trashing by no longer reading document.body.offsetWidth during a snapshot handler of useSyncExternalStore.

The "React way" of measuring layout is to use useLayoutEffect: https://react.dev/reference/react/useLayoutEffect#measuring-layout-before-the-browser-repaints-the-screen

A follow up PR (based on #1368) will move tooltip layout measuring to use the size middleware, which is equivalent to using useLayoutEffect and completely solves layout trashing during render.
However, refactoring to that middleware requires more testing to ensure it doesn't cause regression bugs. That's the main justification for this PR.

While at it this PR:

Copy link

vercel bot commented Jul 10, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sanity-ui-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 10, 2024 7:14pm
sanity-ui-workshop ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 10, 2024 7:14pm

Copy link

socket-security bot commented Jul 10, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher

🚮 Removed packages: npm/@storybook/[email protected], npm/@types/[email protected]

View full report↗︎

@stipsan stipsan merged commit 0cb1cb1 into main Jul 11, 2024
11 checks passed
@stipsan stipsan deleted the reduce-layout-trashing branch July 11, 2024 11:15
rexxars added a commit that referenced this pull request Jul 11, 2024
rexxars added a commit that referenced this pull request Jul 11, 2024
* Revert "fix(tooltip): regression where hover to open stops working (#1371)"

This reverts commit 038011b.

* Revert "fix(tooltip): use layout effect to calculate width (#1370)"

This reverts commit e39ddbe.

* Revert "fix: reduce layout trashing (#1369)"

This reverts commit 0cb1cb1.
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.

2 participants