fix: warnings on React 19 #7654

stipsan · 2024-10-22T13:43:27Z

Description

On React 19, on Next 15 in next dev in particular, we got warnings that show up as errors, and that aren't actionable in userland as the problem is in our code.
One half of it was fixed in @sanity/ui #7653
The rest is in this PR.

The errors seen in userland are:

As well as this console warning:

Fixes #7655

What to review

These are minor changes but have a glance to see if we're avoiding any regressions.

Testing

You can test the before/after by running pnpm dev:next-studio on next, then on this branch.
Opening http://localhost:3333/test/structure/author, and the help menu:

Should be enough to both trigger the dialog, and the console.warn instances.

Notes for release

Fixed warnings on React 19:

Accessing element.ref was removed in React 19.
Invalid prop tabIndex was supplied to React.Fragment.

vercel · 2024-10-22T13:43:31Z

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	Oct 22, 2024 1:50pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 1:50pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 1:50pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 1:50pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 1:50pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)			Oct 22, 2024 1:50pm

github-actions · 2024-10-22T13:44:21Z

No changes to documentation

github-actions · 2024-10-22T13:49:57Z

Component Testing Report Updated Oct 22, 2024 1:49 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	47s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	9s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	32s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	38s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	11s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	2m 33s	1	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	47s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 42s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 18s	18	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	26s	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	37s	12	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3

pedrobonamin

Thanks for fixing this @stipsan I've tested it locally and it looks good

github-actions · 2024-10-22T13:54:05Z

⚡️ Editor Performance Report

Updated Tue, 22 Oct 2024 13:54:04 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	16.3 efps (62ms)	17.5 efps (57ms)	-5ms (-7.3%)	✅
article (body)	59.9 efps (17ms)	59.9 efps (17ms)	+0ms (-/-%)	✅
article (string inside object)	17.9 efps (56ms)	17.9 efps (56ms)	+0ms (-/-%)	✅
article (string inside array)	14.3 efps (70ms)	14.5 efps (69ms)	-1ms (-1.4%)	✅
recipe (name)	29.4 efps (34ms)	30.3 efps (33ms)	-1ms (-2.9%)	✅
recipe (description)	33.3 efps (30ms)	33.3 efps (30ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (7ms)	99.9+ efps (6ms)	-1ms (-/-%)	✅
synthetic (title)	14.9 efps (67ms)	15.2 efps (66ms)	-1ms (-1.5%)	✅
synthetic (string inside object)	15.6 efps (64ms)	15.9 efps (63ms)	-1ms (-1.6%)	✅

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)	62ms	70ms	78ms	361ms	699ms	13.9s
article (body)	17ms	19ms	21ms	145ms	259ms	5.4s
article (string inside object)	56ms	60ms	65ms	119ms	269ms	8.7s
article (string inside array)	70ms	75ms	92ms	164ms	981ms	9.6s
recipe (name)	34ms	35ms	39ms	81ms	14ms	9.3s
recipe (description)	30ms	32ms	42ms	72ms	3ms	6.2s
recipe (instructions)	7ms	8ms	9ms	25ms	0ms	3.3s
synthetic (title)	67ms	70ms	80ms	296ms	1498ms	19.2s
synthetic (string inside object)	64ms	70ms	81ms	171ms	1348ms	9.7s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	57ms	62ms	77ms	249ms	305ms	13.0s
article (body)	17ms	19ms	23ms	253ms	305ms	5.4s
article (string inside object)	56ms	59ms	68ms	158ms	368ms	9.0s
article (string inside array)	69ms	72ms	79ms	288ms	1044ms	9.8s
recipe (name)	33ms	36ms	53ms	90ms	0ms	9.3s
recipe (description)	30ms	32ms	44ms	118ms	0ms	6.2s
recipe (instructions)	6ms	8ms	9ms	24ms	0ms	3.3s
synthetic (title)	66ms	69ms	79ms	295ms	1490ms	15.7s
synthetic (string inside object)	63ms	66ms	78ms	711ms	1916ms	10.2s

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

* next: v3.62.0 fix: warnings on React 19 (#7654) fix(deps): update dependency @sanity/ui to ^2.8.10 (#7652) fix(deps): update dependency @sanity/ui to ^2.8.10 (#7653) chore(deps): update dependency @sanity/visual-editing to v2.2.2 (#7651) fix(core): inherit readOnly state from ancestors in copyPaste function (#7643) fix(deps): update dependency @sanity/mutate to ^0.10.1 (#7650) fix(deps): Update dev-non-major (#7649) fix(deps): update dependency @sanity/presentation to v1.17.3 (#7648) fix(deps): update dependency @portabletext/editor to ^1.1.5 (#7638) fix(deps): update dependency @sanity/presentation to v1.17.2 (#7647) fix(deps): Update dev-non-major (#7646) fix(deps): update dependency @sanity/presentation to v1.17.1 (#7645) chore(deps): update dependency @sanity/preview-url-secret to v2 (#7641) fix(deps): update dependency @sanity/presentation to v1.17.0 (#7640) fix(deps): Update dev-non-major (#7639) chore(cli): update help copy for deploy command (#7624) chore(test-studio): add asset types to structure navigation (#7631)

fix: warnings on React 19

ba77afd

stipsan requested a review from a team as a code owner October 22, 2024 13:43

stipsan requested review from binoy14 and removed request for a team October 22, 2024 13:43

stipsan enabled auto-merge October 22, 2024 13:43

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

vercel bot deployed to Preview – test-compiled-studio October 22, 2024 13:49 View deployment

pedrobonamin approved these changes Oct 22, 2024

View reviewed changes

stipsan added this pull request to the merge queue Oct 22, 2024

Merged via the queue into next with commit 9c72c74 Oct 22, 2024
67 checks passed

stipsan deleted the fix-react-19-warnings branch October 22, 2024 13:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: warnings on React 19 #7654

fix: warnings on React 19 #7654

stipsan commented Oct 22, 2024 •

edited

Loading

vercel bot commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

pedrobonamin left a comment

github-actions bot commented Oct 22, 2024

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

fix: warnings on React 19 #7654

fix: warnings on React 19 #7654

Conversation

stipsan commented Oct 22, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Oct 22, 2024 • edited Loading

github-actions bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

pedrobonamin left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 22, 2024

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

stipsan commented Oct 22, 2024 •

edited

Loading

vercel bot commented Oct 22, 2024 •

edited

Loading