fix: improve presence menu performance #8039
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
No changes to documentation |
|
Component Testing Report Updated Dec 13, 2024 2:51 PM (UTC) ❌ Failed Tests (7) -- expand for details
|
⚡️ Editor Performance ReportUpdated Fri, 13 Dec 2024 14:55:18 GMT
Detailed information🏠 Reference resultThe performance result of
🧪 Experiment resultThe performance result of this branch
📚 Glossary
|
stipsan
commented
Dec 13, 2024
Comment on lines
-46
to
-64
| const LinkComponent = useMemo( | ||
| () => | ||
| // eslint-disable-next-line @typescript-eslint/no-shadow | ||
| forwardRef(function LinkComponent(linkProps, ref: ForwardedRef<HTMLAnchorElement>) { | ||
| if (!lastActiveLocation?.path) return null | ||
|
|
||
| return ( | ||
| <IntentLink | ||
| {...linkProps} | ||
| intent="edit" | ||
| params={{ | ||
| id: lastActiveLocation?.documentId, | ||
| path: PathUtils.toString(lastActiveLocation?.path), | ||
| }} | ||
| ref={ref} | ||
| /> | ||
| ) | ||
| }), | ||
| [lastActiveLocation], |
There was a problem hiding this comment.
For some reason React Compiler bails out of this component here.
I tried removing the useMemo to leave it to the compiler how to memoize it, and the bug was still there.
Turns out the problem is that defining components inline like this isn't a supported pattern.
By refactoring <MenuItem> to use a stable as prop to IntentLink, and give it props and live it to styled-components to forward props, it works with the compiler as well.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes a performance issue in
<PresenceMenuItem />causing edit intent links to constantly unmount and mount new dom nodes on every single render.What to review
Does it make sense?
Testing
Tested manually, verified with
pnpm dev:million-lintthat the issue is resolved.Notes for release
Links in the global presence dropdown menu had a bug that caused nodes to constantly unmount and remount, slowing down exponentially with how many people are in the studio at the same time. It now renders efficiently.