fix: speed up hovered field provider #8044

stipsan · 2024-12-13T17:55:58Z

Description

Every time a field is hovered, every field rerenders, even though each field is only interested if its hover state is true or false:

hover.bad.mov

This is due to the context provider broadcasting the current field that has focus, to all its useContext subscribers. Even though each field only wants to know a boolean, they rerender even if the boolean haven't changed.
By refactoring to a simple useSyncExternalStore, we're able to use getSnapshot to control when renders happen. Since getSnapshot returns a boolean, it'll only re-render when the returned boolean actually changes. In other words, even if getSnapshot is called every time a field is hovered, the components subscribed to the store won't rerender unless the boolean it cares about has changed.

hover.good.mov

What to review

Are the code comments and this PR enough to explain this pattern?

Testing

Existing tests are sufficient.

Notes for release

Improved render performance when hovering fields, no more everything renders all at once on every hover 😮‍💨

vercel · 2024-12-13T17:56:03Z

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	Dec 16, 2024 4:19pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 4:19pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 4:19pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 4:19pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Dec 16, 2024 4:19pm

github-actions · 2024-12-13T17:56:56Z

No changes to documentation

github-actions · 2024-12-13T18:03:39Z

Component Testing Report Updated Dec 16, 2024 3:55 PM (UTC)

❌ Failed Tests (2) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 12s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	41s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	58s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	16s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	❌ Failed (Inspect)	1m 49s	4	0	2
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 16s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	3m 4s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 50s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	43s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 55s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

github-actions · 2024-12-13T18:08:08Z

⚡️ Editor Performance Report

Updated Mon, 16 Dec 2024 15:50:56 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	23.3 efps (43ms)	21.7 efps (46ms)	+3ms (+7.0%)	✅
article (body)	67.6 efps (15ms)	63.1 efps (16ms)	+1ms (-/-%)	✅
article (string inside object)	25.6 efps (39ms)	22.7 efps (44ms)	+5ms (+12.8%)	✅
article (string inside array)	22.7 efps (44ms)	21.7 efps (46ms)	+2ms (+4.5%)	✅
recipe (name)	50.0 efps (20ms)	52.6 efps (19ms)	-1ms (-5.0%)	✅
recipe (description)	57.1 efps (18ms)	58.8 efps (17ms)	-1ms (-2.9%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	19.2 efps (52ms)	19.6 efps (51ms)	-1ms (-1.9%)	✅
synthetic (string inside object)	19.6 efps (51ms)	18.5 efps (54ms)	+3ms (+5.9%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	43ms	47ms	72ms	357ms	732ms	10.9s
article (body)	15ms	17ms	21ms	193ms	257ms	5.4s
article (string inside object)	39ms	42ms	47ms	53ms	4ms	6.4s
article (string inside array)	44ms	46ms	47ms	56ms	0ms	6.7s
recipe (name)	20ms	21ms	23ms	39ms	0ms	6.8s
recipe (description)	18ms	19ms	21ms	28ms	0ms	4.5s
recipe (instructions)	5ms	7ms	8ms	10ms	0ms	3.0s
synthetic (title)	52ms	53ms	57ms	238ms	475ms	13.1s
synthetic (string inside object)	51ms	54ms	57ms	459ms	814ms	8.3s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	46ms	48ms	52ms	165ms	178ms	11.4s
article (body)	16ms	17ms	19ms	52ms	52ms	5.1s
article (string inside object)	44ms	46ms	48ms	62ms	132ms	6.9s
article (string inside array)	46ms	49ms	52ms	58ms	20ms	7.0s
recipe (name)	19ms	21ms	23ms	38ms	0ms	7.0s
recipe (description)	17ms	18ms	20ms	22ms	0ms	4.4s
recipe (instructions)	5ms	7ms	9ms	21ms	0ms	3.1s
synthetic (title)	51ms	55ms	76ms	123ms	246ms	13.1s
synthetic (string inside object)	54ms	56ms	59ms	261ms	540ms	8.3s

📚 Glossary

column definitions

benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".

latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.

p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.

p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.

p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.

blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.

test duration — how long the test run took to complete.

jordanl17 · 2024-12-16T11:08:06Z

packages/sanity/src/core/form/field/actions/FieldActionsProvider.tsx

+    store: hoveredStore,
+  } = useHoveredField()
+  /**
+   * The `useSyncExternalStore` has a super power: if the value returned by the snapshot hasn't changed since last time, React won't re-render the component.


The base branch was changed.

vercel bot deployed to Preview – performance-studio December 13, 2024 17:56 View deployment

vercel bot deployed to Preview – page-building-studio December 13, 2024 17:57 View deployment

vercel bot deployed to Preview – test-studio December 13, 2024 17:58 View deployment

vercel bot deployed to Preview – test-next-studio December 13, 2024 18:06 View deployment

stipsan marked this pull request as ready for review December 13, 2024 18:16

stipsan requested a review from a team as a code owner December 13, 2024 18:16

stipsan requested review from jordanl17 and removed request for a team December 13, 2024 18:16

jordanl17 reviewed Dec 16, 2024

View reviewed changes

jordanl17 previously approved these changes Dec 16, 2024

View reviewed changes

stipsan force-pushed the add-million-lint-mode branch from 9d075f4 to f5cd7df Compare December 16, 2024 11:31

Base automatically changed from add-million-lint-mode to next December 16, 2024 13:26

fix: speed up hovered field provider

a5a3ea5

stipsan force-pushed the fix-hover-field-excessive-renders branch from ff6d4b8 to a5a3ea5 Compare December 16, 2024 15:13

stipsan merged commit e177ace into next Dec 16, 2024
30 of 35 checks passed

stipsan deleted the fix-hover-field-excessive-renders branch December 16, 2024 15:18

vercel bot deployed to Preview – performance-studio December 16, 2024 16:09 View deployment

vercel bot deployed to Preview – page-building-studio December 16, 2024 16:09 View deployment

vercel bot deployed to Preview – test-studio December 16, 2024 16:09 View deployment

vercel bot deployed to Preview – test-next-studio December 16, 2024 16:19 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: speed up hovered field provider #8044

fix: speed up hovered field provider #8044

stipsan commented Dec 13, 2024 •

edited

Loading

vercel bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

jordanl17 Dec 16, 2024

fix: speed up hovered field provider #8044

fix: speed up hovered field provider #8044

Conversation

stipsan commented Dec 13, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Dec 13, 2024 • edited Loading

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024 • edited Loading

github-actions bot commented Dec 13, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

jordanl17 Dec 16, 2024

Choose a reason for hiding this comment

stipsan commented Dec 13, 2024 •

edited

Loading

vercel bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading