fix(structure): avoid spreading `key` into props, pass explicitly #8580

rexxars · 2025-02-10T19:22:19Z

Description

Edge case, but some plugins/setups apparently define a key property for structure component panes, which gives a warning about A props object containing a "key" prop is being spread into JSX when we render. This PR explicitly calls out key as being deprecated/should be avoided, but also picks it out of the props being spread and explicitly forwards it. This ensures backwards compatibility as well as avoiding the error, and potentially helps developers know not to pass it in the first place.

What to review

User component panes still work as expected

Testing

Very edge-case, so not adding a test here.

Notes for release

None

vercel · 2025-02-10T19:22:24Z

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	Feb 10, 2025 7:44pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 10, 2025 7:44pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 10, 2025 7:44pm

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Feb 10, 2025 7:44pm
test-next-studio	⬜️ Ignored (Inspect)			Feb 10, 2025 7:44pm

github-actions · 2025-02-10T19:23:06Z

No changes to documentation

github-actions · 2025-02-10T19:28:22Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	42.43%	53732 / 126631
🔵	Statements	42.43%	53732 / 126631
🔵	Functions	47.93%	2769 / 5777
🔵	Branches	78.76%	10280 / 13051

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/sanity/src/structure/panes/types.ts	0%	0%	0%	0%
packages/sanity/src/structure/panes/userComponent/UserComponentPane.tsx	0%	0%	0%	0%	1-60

Generated in workflow #30112 for commit 8330aba by the Vitest Coverage Report Action

github-actions · 2025-02-10T19:33:20Z

Component Testing Report Updated Feb 10, 2025 9:31 PM (UTC)

❌ Failed Tests (2) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 10s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	13s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	❌ Failed (Inspect)	1m 58s	4	0	2
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	55s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	27s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	15s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	28s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 9s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 37s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	2m 6s	21	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	13s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	27s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 46s	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 · 2025-02-10T19:34:53Z

⚡️ Editor Performance Report

Updated Mon, 10 Feb 2025 19:34:52 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	27.0 efps (37ms)	24.4 efps (41ms)	+4ms (+10.8%)	✅
article (body)	65.4 efps (15ms)	67.8 efps (15ms)	-1ms (-/-%)	✅
article (string inside object)	27.8 efps (36ms)	24.4 efps (41ms)	+5ms (+13.9%)	✅
article (string inside array)	23.8 efps (42ms)	22.2 efps (45ms)	+3ms (+7.1%)	✅
recipe (name)	45.5 efps (22ms)	52.6 efps (19ms)	-3ms (-13.6%)	✅
recipe (description)	52.6 efps (19ms)	58.8 efps (17ms)	-2ms (-10.5%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	20.4 efps (49ms)	19.6 efps (51ms)	+2ms (+4.1%)	✅
synthetic (string inside object)	19.8 efps (51ms)	20.0 efps (50ms)	-1ms (-1.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)	37ms	44ms	56ms	381ms	715ms	10.2s
article (body)	15ms	18ms	37ms	109ms	451ms	5.6s
article (string inside object)	36ms	39ms	42ms	148ms	325ms	6.8s
article (string inside array)	42ms	44ms	51ms	272ms	459ms	7.3s
recipe (name)	22ms	24ms	28ms	42ms	0ms	7.7s
recipe (description)	19ms	20ms	23ms	31ms	0ms	5.0s
recipe (instructions)	5ms	6ms	8ms	21ms	0ms	3.0s
synthetic (title)	49ms	54ms	78ms	456ms	1258ms	13.4s
synthetic (string inside object)	51ms	54ms	54ms	355ms	612ms	7.9s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	41ms	48ms	73ms	429ms	786ms	11.2s
article (body)	15ms	16ms	25ms	65ms	301ms	5.4s
article (string inside object)	41ms	43ms	72ms	177ms	390ms	7.6s
article (string inside array)	45ms	50ms	54ms	232ms	431ms	7.7s
recipe (name)	19ms	21ms	23ms	38ms	0ms	6.9s
recipe (description)	17ms	18ms	19ms	37ms	0ms	4.4s
recipe (instructions)	5ms	7ms	8ms	9ms	0ms	3.1s
synthetic (title)	51ms	54ms	66ms	240ms	654ms	13.3s
synthetic (string inside object)	50ms	53ms	58ms	375ms	809ms	8.5s

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

)

fix(structure): avoid spreading key into props, pass explicitly

8330aba

rexxars requested a review from a team as a code owner February 10, 2025 19:22

rexxars requested review from cngonzalez and removed request for a team February 10, 2025 19:22

rexxars requested a review from binoy14 February 10, 2025 19:25

vercel bot deployed to Preview – test-studio February 10, 2025 19:25 View deployment

rexxars mentioned this pull request Feb 10, 2025

A props object containg key prop bug sanity-io/orderable-document-list#105

Open

jordanl17 approved these changes Feb 10, 2025

View reviewed changes

vercel bot deployed to Preview – page-building-studio February 10, 2025 19:44 View deployment

vercel bot deployed to Preview – performance-studio February 10, 2025 19:44 View deployment

binoy14 approved these changes Feb 10, 2025

View reviewed changes

rexxars added this pull request to the merge queue Feb 11, 2025

Merged via the queue into next with commit 001c395 Feb 11, 2025
59 of 60 checks passed

rexxars deleted the fix/user-component-pane-key branch February 11, 2025 17:39

EoinFalconer pushed a commit that referenced this pull request Feb 16, 2025

fix(structure): avoid spreading key into props, pass explicitly (#8580

8ad369b

)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(structure): avoid spreading `key` into props, pass explicitly #8580

fix(structure): avoid spreading `key` into props, pass explicitly #8580

rexxars commented Feb 10, 2025

vercel bot commented Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 10, 2025

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

fix(structure): avoid spreading key into props, pass explicitly #8580

fix(structure): avoid spreading key into props, pass explicitly #8580

Conversation

rexxars commented Feb 10, 2025

Description

What to review

Testing

Notes for release

vercel bot commented Feb 10, 2025 • edited Loading

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 10, 2025

Coverage Report

github-actions bot commented Feb 10, 2025 • edited Loading

github-actions bot commented Feb 10, 2025

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

fix(structure): avoid spreading `key` into props, pass explicitly #8580

fix(structure): avoid spreading `key` into props, pass explicitly #8580

vercel bot commented Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 10, 2025 •

edited

Loading