fix: improve `SanityDefaultPreview` memoization #8049

stipsan · 2024-12-13T18:31:48Z

Description

Improves render performance on lists and reference previews by wrapping SanityDefaultPreview in React.memo, as well as by refactoring it to make full use of React Compiler.

What to review

Makes sense?

Testing

Existing tests should be enough.

Notes for release

Refactored SanityDefaultPreview to be auto memoized by React Compiler, improving performance on document list previews, and reference selectors.

vercel · 2024-12-13T18:31:53Z

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Dec 18, 2024 1:36pm

github-actions · 2024-12-13T18:36:55Z

No changes to documentation

github-actions · 2024-12-13T18:44:15Z

⚡️ Editor Performance Report

Updated Wed, 18 Dec 2024 13:34:28 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	22.7 efps (44ms)	23.3 efps (43ms)	-1ms (-2.3%)	✅
article (body)	63.7 efps (16ms)	67.3 efps (15ms)	-1ms (-/-%)	✅
article (string inside object)	24.4 efps (41ms)	23.5 efps (43ms)	+2ms (+3.7%)	✅
article (string inside array)	21.7 efps (46ms)	21.7 efps (46ms)	+0ms (-/-%)	✅
recipe (name)	47.6 efps (21ms)	45.5 efps (22ms)	+1ms (+4.8%)	✅
recipe (description)	55.6 efps (18ms)	52.6 efps (19ms)	+1ms (+5.6%)	✅
recipe (instructions)	99.9+ efps (6ms)	99.9+ efps (5ms)	-1ms (-/-%)	✅
synthetic (title)	18.2 efps (55ms)	19.2 efps (52ms)	-3ms (-5.5%)	✅
synthetic (string inside object)	19.6 efps (51ms)	20.0 efps (50ms)	-1ms (-2.0%)	✅

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)	44ms	61ms	73ms	439ms	659ms	12.6s
article (body)	16ms	18ms	19ms	193ms	254ms	5.6s
article (string inside object)	41ms	43ms	48ms	68ms	252ms	7.0s
article (string inside array)	46ms	48ms	50ms	166ms	160ms	7.3s
recipe (name)	21ms	23ms	26ms	37ms	0ms	7.8s
recipe (description)	18ms	20ms	22ms	35ms	0ms	4.6s
recipe (instructions)	6ms	8ms	10ms	27ms	0ms	3.2s
synthetic (title)	55ms	58ms	66ms	286ms	577ms	13.8s
synthetic (string inside object)	51ms	54ms	63ms	176ms	478ms	8.0s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	43ms	48ms	66ms	514ms	828ms	12.5s
article (body)	15ms	17ms	20ms	29ms	77ms	5.1s
article (string inside object)	43ms	47ms	57ms	98ms	270ms	7.1s
article (string inside array)	46ms	50ms	69ms	258ms	276ms	7.6s
recipe (name)	22ms	24ms	25ms	40ms	0ms	8.0s
recipe (description)	19ms	20ms	22ms	31ms	0ms	4.6s
recipe (instructions)	5ms	7ms	9ms	38ms	0ms	3.1s
synthetic (title)	52ms	55ms	73ms	362ms	565ms	12.6s
synthetic (string inside object)	50ms	56ms	79ms	495ms	940ms	8.4s

📚 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.

github-actions · 2024-12-13T18:44:19Z

Component Testing Report Updated Dec 18, 2024 1:32 PM (UTC)

✅ All Tests Passed -- expand for details

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

stipsan · 2024-12-18T11:10:22Z

packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx

Before / After

jordanl17

LGTM

* next: (68 commits) fix(deps): update dependency @sanity/icons to ^3.5.5 (#8105) fix(deps): update dependency @sanity/ui to ^2.10.12 (#8108) fix(deps): update dependency react-rx to ^4.1.10 (#8109) chore(deps): update dependency @sanity/tsdoc to v1.0.153 (#8107) chore(deps): update typescript-tooling (#8104) fix(deps): update dependency @sanity/icons to ^3.5.5 (#8106) feat(typegen): add support for astro (#8098) chore(deps): update dependency turbo to ^2.3.3 (#8099) fix(deps): Update dev-non-major (#8100) fix: `WebSocket is closed before the connection is established` warning (#8042) v3.68.1 fix(deps): update dependency @sanity/presentation to v1.19.13 (#8102) v3.68.0 fix: use consistent `framer-motion` semver range (#8094) refactor(core): replace `PortableTextEditor` with `EditorProvider` (#8040) fix: improve `SanityDefaultPreview` memoization (#8049) fix: tooltip position in announcements popup (#8092) fix: replace useMemo with useState (#8095) fix: replace unsafe `useMemo` with `useState` (#8047) fix: replace `React.createElement` with jsx runtime (#8043) ...

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

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

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

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

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

stipsan force-pushed the improve-sanity-default-preview-memoization branch from 4742128 to 3056d60 Compare December 16, 2024 21:34

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

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

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

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

stipsan force-pushed the improve-sanity-default-preview-memoization branch from 3056d60 to ac91b20 Compare December 18, 2024 11:09

stipsan commented Dec 18, 2024

View reviewed changes

packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx

Copy link

Member Author

stipsan Dec 18, 2024

Choose a reason for hiding this comment

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

Before / After

stipsan marked this pull request as ready for review December 18, 2024 11:14

stipsan requested a review from a team as a code owner December 18, 2024 11:14

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

stipsan enabled auto-merge December 18, 2024 11:17

vercel bot deployed to Preview – performance-studio December 18, 2024 11:18 View deployment

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

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

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

fix: improve SanityDefaultPreview memoization

efc4a70

stipsan force-pushed the improve-sanity-default-preview-memoization branch from ac91b20 to efc4a70 Compare December 18, 2024 13:21

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

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

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

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

jordanl17 approved these changes Dec 18, 2024

View reviewed changes

stipsan added this pull request to the merge queue Dec 18, 2024

Merged via the queue into next with commit a6d5320 Dec 18, 2024
57 checks passed

stipsan deleted the improve-sanity-default-preview-memoization branch December 18, 2024 14:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: improve `SanityDefaultPreview` memoization #8049

fix: improve `SanityDefaultPreview` memoization #8049

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

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

github-actions bot commented Dec 13, 2024 •

edited

Loading

stipsan Dec 18, 2024

jordanl17 left a comment

fix: improve SanityDefaultPreview memoization #8049

fix: improve SanityDefaultPreview memoization #8049

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

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

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

stipsan Dec 18, 2024

Choose a reason for hiding this comment

jordanl17 left a comment

Choose a reason for hiding this comment

fix: improve `SanityDefaultPreview` memoization #8049

fix: improve `SanityDefaultPreview` memoization #8049

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