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(core): avoid unnecessary re-renders in useDocumentPresence #7365

Merged
merged 4 commits into from
Aug 22, 2024

Conversation

runeb
Copy link
Member

@runeb runeb commented Aug 13, 2024

Description

When presence store receives announcements, consumers of useDocumentPresence receive subscription updates that relate to the documentId they are interested in. This patch fixes a bug where the store would continually emit [] to all subscribers that did not have any presence state, which due to setState caused them to re-render.

The first fix for this was to leverage useReducer in useDocumentPresence to only cause a re-render when the presence data actually changed, but in a second commit I have attempted to fix this in the presence store itself, making sure to only emit if there are changes. This means we will emit [] when first subscribed, but from then only when there is an update to presence data for the given documentId.

What to review

The split between common subscription data and documentId specific data, the usage of shareReplay and the equality checks.

Testing

I can confirm that this reduces the amount of re-renders happening in the Studio, since each PaneItem now only re-renders when presence data relating to their documentId has changed.

Notes for release

Optimized rendering of changes in presence

@runeb runeb requested a review from a team as a code owner August 13, 2024 03:07
@runeb runeb requested review from juice49 and removed request for a team August 13, 2024 03:07
Copy link

vercel bot commented Aug 13, 2024

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

Name Status Preview Comments Updated (UTC)
page-building-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2024 5:02pm
performance-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2024 5:02pm
test-compiled-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2024 5:02pm
test-next-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2024 5:02pm
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2024 5:02pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Visit Preview Aug 22, 2024 5:02pm

Copy link
Contributor

No changes to documentation

Copy link
Contributor

github-actions bot commented Aug 13, 2024

Component Testing Report Updated Aug 22, 2024 5:07 PM (UTC)

❌ Failed Tests (1) -- expand for details
File Status Duration Passed Skipped Failed
comments/CommentInput.spec.tsx ✅ Passed (Inspect) 45s 15 0 0
formBuilder/ArrayInput.spec.tsx ✅ Passed (Inspect) 9s 3 0 0
formBuilder/inputs/PortableText/Annotations.spec.tsx ✅ Passed (Inspect) 30s 6 0 0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx ✅ Passed (Inspect) 37s 11 7 0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx ✅ Passed (Inspect) 0s 0 12 0
formBuilder/inputs/PortableText/Decorators.spec.tsx ✅ Passed (Inspect) 17s 6 0 0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx ✅ Passed (Inspect) 11s 3 0 0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx ✅ Passed (Inspect) 3m 0s 0 0 0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx ✅ Passed (Inspect) 44s 15 0 0
formBuilder/inputs/PortableText/Input.spec.tsx ✅ Passed (Inspect) 1m 47s 21 0 0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx ✅ Passed (Inspect) 1m 15s 18 0 0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx ✅ Passed (Inspect) 8s 3 9 0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx ✅ Passed (Inspect) 26s 9 0 0
formBuilder/inputs/PortableText/Styles.spec.tsx ✅ Passed (Inspect) 18s 6 0 0
formBuilder/inputs/PortableText/Toolbar.spec.tsx ❌ Failed (Inspect) 1m 23s 20 0 1
formBuilder/tree-editing/TreeEditing.spec.tsx ✅ Passed (Inspect) 0s 0 3 0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx ✅ Passed (Inspect) 0s 0 3 0

@runeb runeb requested review from bjoerge and removed request for juice49 August 20, 2024 16:58
)
.filter((item) => debugIntrospect || item.presence.sessionId !== SESSION_ID),
),
shareReplay(1),
Copy link
Member Author

@runeb runeb Aug 20, 2024

Choose a reason for hiding this comment

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

I suppose we can eliminate shareReplay this as its introducing new behavior. Thought was that new subscribers could get the latest event sent to them when they subscribe.

Copy link
Member

Choose a reason for hiding this comment

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

Good call! allSessions$ already replays it's latest value to new subscribers, but this also shares the mapping work done above between all subscribers 👌🏼

Copy link
Member

@bjoerge bjoerge left a comment

Choose a reason for hiding this comment

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

Looks great, thanks a lot @runeb!

)
.filter((item) => debugIntrospect || item.presence.sessionId !== SESSION_ID),
),
shareReplay(1),
Copy link
Member

Choose a reason for hiding this comment

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

Good call! allSessions$ already replays it's latest value to new subscribers, but this also shares the mapping work done above between all subscribers 👌🏼

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