fix: allow useRelativeTime to be auto-memoized

[stipsan]

Description

Follows up on #8034, as the 'use no memo' directive is meant as a short term fix.
The original issue is due to React Compiler working under the assumption that reactive values are in useState, useReducer or useSyncExternalStore.
Calling Date.now() during render is considered a side-effect, and also breaks in other scenarios, such as SSR Hydration (as Date.now() will return different values during server render and when the browser hydrates).
Since we already have a useReducer trick in place that is used to schedule re-renders on set intervals, the theory is that we can just move the Date.now() value as state in that same reducer.
The benefit of doing this is that it allows memoizing and reduce work during render, as the useRelativeTime hook might be called by its components more frequently than its intervals, but it won't do work unless the now state itself has updated.

What to review

Does it make sense?

Testing

Existing tests should be sufficient.

Notes for release

Relative time stamps are optimized by React Compiler, reducing memory usage and allowing faster rerenders.

[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	Dec 17, 2024 11:10am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 11:10am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 11:10am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 11:10am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)			Dec 17, 2024 11:10am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Dec 17, 2024 11:11 AM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 9s	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)	56s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	28s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	15s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 13s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	2m 45s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 47s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 53s	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 Tue, 17 Dec 2024 11:24:12 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	20.8 efps (48ms)	20.2 efps (50ms)	+2ms (+3.1%)	✅
article (body)	59.9 efps (17ms)	59.9 efps (17ms)	+0ms (+0.0%)	✅
article (string inside object)	23.3 efps (43ms)	20.6 efps (49ms)	+6ms (+12.8%)	✅
article (string inside array)	21.7 efps (46ms)	19.2 efps (52ms)	+6ms (+13.0%)	✅
recipe (name)	51.3 efps (20ms)	52.6 efps (19ms)	-1ms (-2.6%)	✅
recipe (description)	58.8 efps (17ms)	58.8 efps (17ms)	+0ms (-/-%)	✅
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.2 efps (52ms)	18.7 efps (54ms)	+2ms (+2.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)	48ms	54ms	71ms	442ms	675ms	11.4s
article (body)	17ms	18ms	22ms	105ms	85ms	5.3s
article (string inside object)	43ms	48ms	59ms	227ms	387ms	7.6s
article (string inside array)	46ms	50ms	59ms	108ms	140ms	7.7s
recipe (name)	20ms	22ms	25ms	39ms	0ms	7.0s
recipe (description)	17ms	19ms	21ms	38ms	0ms	4.5s
recipe (instructions)	5ms	6ms	7ms	27ms	0ms	3.1s
synthetic (title)	52ms	56ms	63ms	229ms	378ms	13.6s
synthetic (string inside object)	52ms	53ms	57ms	88ms	115ms	8.5s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	50ms	75ms	95ms	609ms	979ms	11.8s
article (body)	17ms	19ms	31ms	148ms	120ms	5.7s
article (string inside object)	49ms	52ms	58ms	128ms	263ms	7.9s
article (string inside array)	52ms	56ms	66ms	273ms	359ms	8.2s
recipe (name)	19ms	21ms	26ms	41ms	0ms	7.3s
recipe (description)	17ms	18ms	21ms	29ms	0ms	4.5s
recipe (instructions)	5ms	7ms	7ms	21ms	0ms	3.0s
synthetic (title)	51ms	54ms	57ms	81ms	234ms	13.3s
synthetic (string inside object)	54ms	56ms	63ms	199ms	565ms	8.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.

[juice49]

This is great. Thanks, Cody ✨.