fix(structure): set patchRef in an insertion effect instead of regular useEffect

[bjoerge]

Description

#8077 introduced a regression that broke input components that were calling onChange() as their initial useEffect was run. We do consider it an antipattern to modify the document as a side effect of opening it, but there are still some rare but valid cases for it, so we need it to work.

This PR fixes the problem by overwriting the patchRef ref in a useInsertionEffect instead of a useEffect so that the ref will be set before child components run their initial effects. The fact that we have to do this in the first place is not great, so this diff should be considered a workaround for an edge case, and is something we should look into landing a better fix for in the future.

What to review

I've added a debug schema that calls onChange in a useEffect, before the fix is applied, you can see that it breaks both creating new documents and openig existing ones here: https://test-studio-bmgob5t04.sanity.dev/test/structure/input-debug;patchOnMountDebug

Here's the same document type after the fix: https://test-studio-7d5t064qa.sanity.dev/test/structure/input-debug;patchOnMountDebug

Testing

Manual for now.

Notes for release

• Fixes a regression introduced in v3.38.0 that could in rare cases cause a crash when opening a document in the Studio.

[vercel]

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	Jan 6, 2025 2:27pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 6, 2025 2:27pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 6, 2025 2:27pm

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jan 6, 2025 2:27pm
test-next-studio	⬜️ Ignored (Inspect)			Jan 6, 2025 2:27pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jan 6, 2025 2:33 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 2s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	12s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	38s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	50s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	25s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 6s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 28s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 41s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	13s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 43s	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]

⚡️ Editor Performance Report

Updated Mon, 06 Jan 2025 14:35:15 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	19.4 efps (52ms)	23.5 efps (43ms)	-9ms (-17.5%)	✅
article (body)	50.3 efps (20ms)	46.1 efps (22ms)	+2ms (+9.0%)	✅
article (string inside object)	23.8 efps (42ms)	25.0 efps (40ms)	-2ms (-4.8%)	✅
article (string inside array)	21.3 efps (47ms)	22.2 efps (45ms)	-2ms (-4.3%)	✅
recipe (name)	43.5 efps (23ms)	47.6 efps (21ms)	-2ms (-8.7%)	✅
recipe (description)	47.6 efps (21ms)	51.3 efps (20ms)	-2ms (-7.1%)	✅
recipe (instructions)	99.9+ efps (7ms)	99.9+ efps (7ms)	+1ms (-/-%)	✅
synthetic (title)	17.9 efps (56ms)	18.7 efps (54ms)	-3ms (-4.5%)	✅
synthetic (string inside object)	18.9 efps (53ms)	20.4 efps (49ms)	-4ms (-7.5%)	✅

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)	52ms	68ms	92ms	551ms	1425ms	11.9s
article (body)	20ms	25ms	71ms	289ms	498ms	6.5s
article (string inside object)	42ms	43ms	47ms	174ms	294ms	7.0s
article (string inside array)	47ms	48ms	57ms	208ms	604ms	7.9s
recipe (name)	23ms	25ms	28ms	49ms	0ms	8.2s
recipe (description)	21ms	23ms	26ms	43ms	0ms	5.0s
recipe (instructions)	7ms	9ms	11ms	49ms	20ms	3.3s
synthetic (title)	56ms	59ms	64ms	308ms	1186ms	13.4s
synthetic (string inside object)	53ms	57ms	66ms	461ms	1307ms	9.0s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	43ms	68ms	85ms	521ms	1115ms	11.6s
article (body)	22ms	24ms	31ms	208ms	313ms	6.2s
article (string inside object)	40ms	44ms	50ms	160ms	161ms	6.9s
article (string inside array)	45ms	47ms	60ms	243ms	503ms	7.9s
recipe (name)	21ms	23ms	25ms	47ms	0ms	7.8s
recipe (description)	20ms	20ms	23ms	43ms	1ms	4.8s
recipe (instructions)	7ms	8ms	10ms	12ms	0ms	3.3s
synthetic (title)	54ms	57ms	64ms	340ms	667ms	12.4s
synthetic (string inside object)	49ms	52ms	64ms	98ms	231ms	8.0s

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