Warn our user for hydration mismatches

[JoviDeCroock]

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]

📊 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]

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]

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

[coveralls]

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

[rschristian]

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]

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