Warn our user for hydration mismatches #4490

JoviDeCroock · 2024-09-12T06:31:34Z

One of the things I have been battling while SSR'ing Preact is that I don't know where the mismatch occurs, this for one gives me an error and tells me what the mismatch was.

Another idea that I have been floating here and would love feedback on is to remove the isHydrating as a plain value and move to a ref, the reason for this being that currently we opt-out subtrees from hydration but this is particularly dangerous as siblings to the mismatched node can still be in hydration mode which will cause us to duplicate the DOM if mismatches continue happening.

Related to #4442
Resolves #2737

github-actions · 2024-09-12T06:31:47Z

📊 Tachometer Benchmark Results

Summary

duration

create10k: unsure 🔍 -1% - +0% (-10.71ms - +1.27ms)
^{preact-local vs preact-main}
filter-list: unsure 🔍 -1% - +0% (-0.16ms - +0.02ms)
^{preact-local vs preact-main}
hydrate1k: unsure 🔍 -2% - +2% (-1.37ms - +1.34ms)
^{preact-local vs preact-main}
many-updates: unsure 🔍 -2% - +1% (-0.33ms - +0.13ms)
^{preact-local vs preact-main}
replace1k: unsure 🔍 -2% - +4% (-1.60ms - +3.28ms)
^{preact-local vs preact-main}
text-update: unsure 🔍 -5% - +4% (-0.10ms - +0.09ms)
^{preact-local vs preact-main}
todo: unsure 🔍 -2% - +0% (-0.76ms - +0.00ms)
^{preact-local vs preact-main}
update10th1k: unsure 🔍 -3% - +2% (-1.13ms - +0.53ms)
^{preact-local vs preact-main}

usedJSHeapSize

create10k: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
^{preact-local vs preact-main}
filter-list: unsure 🔍 +0% - +0% (+0.00ms - +0.01ms)
^{preact-local vs preact-main}
hydrate1k: unsure 🔍 -4% - +1% (-0.67ms - +0.19ms)
^{preact-local vs preact-main}
many-updates: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
^{preact-local vs preact-main}
replace1k: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
^{preact-local vs preact-main}
text-update: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
^{preact-local vs preact-main}
todo: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
^{preact-local vs preact-main}
update10th1k: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
^{preact-local vs preact-main}

Results

create10k

Browser: chrome-headless
Sample size: 50
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	913.18ms - 917.50ms	-	unsure 🔍 -1% - +0% -10.71ms - +1.27ms
preact-main	914.47ms - 925.65ms	unsure 🔍 -0% - +1% -1.27ms - +10.71ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	25.25ms - 25.25ms	-	unsure 🔍 +0% - +0% +0.00ms - +0.00ms
preact-main	25.24ms - 25.24ms	unsure 🔍 -0% - -0% -0.00ms - -0.00ms	-

filter-list

Browser: chrome-headless
Sample size: 50
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	16.55ms - 16.60ms	-	unsure 🔍 -1% - +0% -0.16ms - +0.02ms
preact-main	16.56ms - 16.73ms	unsure 🔍 -0% - +1% -0.02ms - +0.16ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.63ms - 1.64ms	-	unsure 🔍 +0% - +0% +0.00ms - +0.01ms
preact-main	1.63ms - 1.63ms	unsure 🔍 -0% - -0% -0.01ms - -0.00ms	-

hydrate1k

Browser: chrome-headless
Sample size: 70
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	75.07ms - 76.82ms	-	unsure 🔍 -2% - +2% -1.37ms - +1.34ms
preact-main	74.92ms - 77.00ms	unsure 🔍 -2% - +2% -1.34ms - +1.37ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	14.39ms - 14.98ms	-	unsure 🔍 -4% - +1% -0.67ms - +0.19ms
preact-main	14.61ms - 15.23ms	unsure 🔍 -1% - +5% -0.19ms - +0.67ms	-

many-updates

Browser: chrome-headless
Sample size: 50
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	16.37ms - 16.65ms	-	unsure 🔍 -2% - +1% -0.33ms - +0.13ms
preact-main	16.44ms - 16.80ms	unsure 🔍 -1% - +2% -0.13ms - +0.33ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	4.54ms - 4.55ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-main	4.54ms - 4.55ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

replace1k

Browser: chrome-headless
Sample size: 100
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	75.70ms - 78.75ms	-	unsure 🔍 -2% - +4% -1.60ms - +3.28ms
preact-main	74.48ms - 78.29ms	unsure 🔍 -4% - +2% -3.28ms - +1.60ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	3.54ms - 3.55ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.01ms
preact-main	3.54ms - 3.56ms	unsure 🔍 -0% - +0% -0.01ms - +0.01ms	-

run-warmup-0

Version	Avg time	vs preact-local	vs preact-main
preact-local	29.96ms - 30.49ms	-	unsure 🔍 -1% - +2% -0.23ms - +0.57ms
preact-main	29.76ms - 30.35ms	unsure 🔍 -2% - +1% -0.57ms - +0.23ms	-

run-warmup-1

Version	Avg time	vs preact-local	vs preact-main
preact-local	34.92ms - 36.16ms	-	unsure 🔍 -0% - +5% +0.00ms - +1.75ms
preact-main	34.06ms - 35.28ms	faster ✔ 0% - 5% 0.00ms - 1.75ms	-

run-warmup-2

Version	Avg time	vs preact-local	vs preact-main
preact-local	25.45ms - 25.91ms	-	unsure 🔍 -2% - +1% -0.50ms - +0.24ms
preact-main	25.52ms - 26.10ms	unsure 🔍 -1% - +2% -0.24ms - +0.50ms	-

run-warmup-3

Version	Avg time	vs preact-local	vs preact-main
preact-local	29.04ms - 30.76ms	-	unsure 🔍 -4% - +4% -1.35ms - +1.12ms
preact-main	29.13ms - 30.89ms	unsure 🔍 -4% - +5% -1.12ms - +1.35ms	-

run-warmup-4

Version	Avg time	vs preact-local	vs preact-main
preact-local	20.20ms - 20.61ms	-	unsure 🔍 -3% - +0% -0.67ms - +0.01ms
preact-main	20.46ms - 21.01ms	unsure 🔍 -0% - +3% -0.01ms - +0.67ms	-

run-final

Version	Avg time	vs preact-local	vs preact-main
preact-local	23.83ms - 25.14ms	-	unsure 🔍 -3% - +5% -0.67ms - +1.11ms
preact-main	23.66ms - 24.87ms	unsure 🔍 -5% - +3% -1.11ms - +0.67ms	-

text-update

Browser: chrome-headless
Sample size: 150
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.92ms - 2.05ms	-	unsure 🔍 -5% - +4% -0.10ms - +0.09ms
preact-main	1.92ms - 2.06ms	unsure 🔍 -4% - +5% -0.09ms - +0.10ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.07ms - 1.08ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-main	1.07ms - 1.08ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

todo

Browser: chrome-headless
Sample size: 50
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	33.27ms - 33.60ms	-	unsure 🔍 -2% - +0% -0.76ms - +0.00ms
preact-main	33.47ms - 34.15ms	unsure 🔍 -0% - +2% -0.00ms - +0.76ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	1.19ms - 1.19ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-main	1.19ms - 1.19ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

update10th1k

Browser: chrome-headless
Sample size: 50
Built by: Benchmarks #1657
Commit: 5e2be37

duration

Version	Avg time	vs preact-local	vs preact-main
preact-local	31.88ms - 32.78ms	-	unsure 🔍 -3% - +2% -1.13ms - +0.53ms
preact-main	31.92ms - 33.32ms	unsure 🔍 -2% - +3% -0.53ms - +1.13ms	-

usedJSHeapSize

Version	Avg time	vs preact-local	vs preact-main
preact-local	3.48ms - 3.49ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.01ms
preact-main	3.48ms - 3.49ms	unsure 🔍 -0% - +0% -0.01ms - +0.00ms	-

_{tachometer-reporter-action v2 for Benchmarks}

github-actions · 2024-09-12T06:32:43Z

Size Change: +371 B (+0.6%)

Total Size: 62.1 kB

Filename	Size	Change
`debug/dist/debug.js`	3.81 kB	+108 B (+2.92%)
`debug/dist/debug.module.js`	3.82 kB	+113 B (+3.05%)
`debug/dist/debug.umd.js`	3.89 kB	+108 B (+2.86%)
`dist/preact.js`	4.67 kB	+6 B (+0.13%)
`dist/preact.min.js`	4.7 kB	+7 B (+0.15%)
`dist/preact.min.module.js`	4.7 kB	+8 B (+0.17%)
`dist/preact.min.umd.js`	4.72 kB	+6 B (+0.13%)
`dist/preact.module.js`	4.69 kB	+10 B (+0.21%)
`dist/preact.umd.js`	4.74 kB	+5 B (+0.11%)

ℹ️ View Unchanged

Filename	Size
`compat/dist/compat.js`	4.11 kB
`compat/dist/compat.module.js`	4.04 kB
`compat/dist/compat.umd.js`	4.18 kB
`devtools/dist/devtools.js`	259 B
`devtools/dist/devtools.module.js`	274 B
`devtools/dist/devtools.umd.js`	345 B
`hooks/dist/hooks.js`	1.53 kB
`hooks/dist/hooks.module.js`	1.56 kB
`hooks/dist/hooks.umd.js`	1.6 kB
`jsx-runtime/dist/jsxRuntime.js`	981 B
`jsx-runtime/dist/jsxRuntime.module.js`	956 B
`jsx-runtime/dist/jsxRuntime.umd.js`	1.06 kB
`test-utils/dist/testUtils.js`	451 B
`test-utils/dist/testUtils.module.js`	456 B
`test-utils/dist/testUtils.umd.js`	536 B

_{compressed-size-action}

marvinhagemeister

Great idea!

coveralls · 2024-09-12T07:12:53Z

coverage: 99.488% (+0.002%) from 99.486%
when pulling 5e2be37 on add-hydration-mismatch
into b976caa on main.

coveralls · 2024-09-12T07:12:53Z

coverage: 99.488% (+0.002%) from 99.486%
when pulling 5e2be37 on add-hydration-mismatch
into b976caa on main.

rschristian · 2024-09-12T07:17:44Z

Should we say this addresses #2737? With React throwing those in prod (to my knowledge), not sure if we want to say that /debug addresses that as we'd like or not.

Sorry for the noise, rethought it once I linked it.

JoviDeCroock · 2024-09-12T07:20:46Z

@rschristian that's a great shout! Thanks for linking that

Warn our user for hydration mismatches

5e2be37

JoviDeCroock force-pushed the add-hydration-mismatch branch from f2ca689 to 5e2be37 Compare September 12, 2024 07:10

marvinhagemeister approved these changes Sep 12, 2024

View reviewed changes

rschristian linked an issue Sep 12, 2024 that may be closed by this pull request

Add SSR hydration mismatch errors #2737

Closed

rschristian removed a link to an issue Sep 12, 2024

Add SSR hydration mismatch errors #2737

Closed

JoviDeCroock merged commit 022dbb1 into main Sep 12, 2024
13 checks passed

JoviDeCroock deleted the add-hydration-mismatch branch September 12, 2024 08:56

JoviDeCroock mentioned this pull request Sep 14, 2024

10.24.0 #4495

Merged

JoviDeCroock mentioned this pull request Sep 28, 2024

Use a ref to track the hydrating state #4514

Closed

X-oss-byte mentioned this pull request Oct 5, 2024

[Snyk] Upgrade preact from 10.11.3 to 10.24.0 X-oss-byte/next-auth#123

Open

lorenzoAtBEIS mentioned this pull request Oct 7, 2024

[Snyk] Upgrade preact from 10.23.2 to 10.24.0 UKGovernmentBEIS/inspect_ai#657

Merged

X-oss-byte mentioned this pull request Oct 18, 2024

[Snyk] Upgrade preact from 10.11.3 to 10.24.1 X-oss-byte/next-auth#125

Open

X-oss-byte mentioned this pull request Oct 25, 2024

[Snyk] Upgrade preact from 10.11.3 to 10.24.2 X-oss-byte/next-auth#127

Open

Xcaciv mentioned this pull request Oct 27, 2024

[Snyk] Upgrade preact from 10.22.0 to 10.24.2 Xcaciv/appsec-test-2024#3

Open

dwhiteGUK mentioned this pull request Oct 28, 2024

[Snyk] Upgrade preact from 10.11.3 to 10.24.2 dwhiteGUK/dlw.dev#39

Open

abaum65 mentioned this pull request Oct 31, 2024

[Snyk] Upgrade preact from 10.22.0 to 10.24.2 abaum65/saintcon-appsec-challenge-2024#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warn our user for hydration mismatches #4490

Warn our user for hydration mismatches #4490

JoviDeCroock commented Sep 12, 2024 •

edited

Loading

github-actions bot commented Sep 12, 2024 •

edited

Loading

📊 Tachometer Benchmark Results

Summary

duration

usedJSHeapSize

Results

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

run-warmup-0

run-warmup-1

run-warmup-2

run-warmup-3

run-warmup-4

run-final

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

github-actions bot commented Sep 12, 2024 •

edited

Loading

marvinhagemeister left a comment

coveralls commented Sep 12, 2024

coveralls commented Sep 12, 2024

rschristian commented Sep 12, 2024 •

edited

Loading

JoviDeCroock commented Sep 12, 2024

Warn our user for hydration mismatches #4490

Warn our user for hydration mismatches #4490

Conversation

JoviDeCroock commented Sep 12, 2024 • edited Loading

github-actions bot commented Sep 12, 2024 • edited Loading

📊 Tachometer Benchmark Results

Summary

duration

usedJSHeapSize

Results

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

run-warmup-0

run-warmup-1

run-warmup-2

run-warmup-3

run-warmup-4

run-final

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

github-actions bot commented Sep 12, 2024 • edited Loading

marvinhagemeister left a comment

Choose a reason for hiding this comment

coveralls commented Sep 12, 2024

coveralls commented Sep 12, 2024

rschristian commented Sep 12, 2024 • edited Loading

JoviDeCroock commented Sep 12, 2024

JoviDeCroock commented Sep 12, 2024 •

edited

Loading

github-actions bot commented Sep 12, 2024 •

edited

Loading

github-actions bot commented Sep 12, 2024 •

edited

Loading

rschristian commented Sep 12, 2024 •

edited

Loading