Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warn our user for hydration mismatches #4490

Merged
merged 1 commit into from
Sep 12, 2024
Merged

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Sep 12, 2024

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

Copy link

github-actions bot commented Sep 12, 2024

📊 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

duration

VersionAvg timevs preact-localvs preact-main
preact-local913.18ms - 917.50ms-unsure 🔍
-1% - +0%
-10.71ms - +1.27ms
preact-main914.47ms - 925.65msunsure 🔍
-0% - +1%
-1.27ms - +10.71ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local25.25ms - 25.25ms-unsure 🔍
+0% - +0%
+0.00ms - +0.00ms
preact-main25.24ms - 25.24msunsure 🔍
-0% - -0%
-0.00ms - -0.00ms
-
filter-list

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.55ms - 16.60ms-unsure 🔍
-1% - +0%
-0.16ms - +0.02ms
preact-main16.56ms - 16.73msunsure 🔍
-0% - +1%
-0.02ms - +0.16ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.63ms - 1.64ms-unsure 🔍
+0% - +0%
+0.00ms - +0.01ms
preact-main1.63ms - 1.63msunsure 🔍
-0% - -0%
-0.01ms - -0.00ms
-
hydrate1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local75.07ms - 76.82ms-unsure 🔍
-2% - +2%
-1.37ms - +1.34ms
preact-main74.92ms - 77.00msunsure 🔍
-2% - +2%
-1.34ms - +1.37ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local14.39ms - 14.98ms-unsure 🔍
-4% - +1%
-0.67ms - +0.19ms
preact-main14.61ms - 15.23msunsure 🔍
-1% - +5%
-0.19ms - +0.67ms
-
many-updates

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.37ms - 16.65ms-unsure 🔍
-2% - +1%
-0.33ms - +0.13ms
preact-main16.44ms - 16.80msunsure 🔍
-1% - +2%
-0.13ms - +0.33ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local4.54ms - 4.55ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main4.54ms - 4.55msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
replace1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local75.70ms - 78.75ms-unsure 🔍
-2% - +4%
-1.60ms - +3.28ms
preact-main74.48ms - 78.29msunsure 🔍
-4% - +2%
-3.28ms - +1.60ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.54ms - 3.55ms-unsure 🔍
-0% - +0%
-0.01ms - +0.01ms
preact-main3.54ms - 3.56msunsure 🔍
-0% - +0%
-0.01ms - +0.01ms
-

run-warmup-0

VersionAvg timevs preact-localvs preact-main
preact-local29.96ms - 30.49ms-unsure 🔍
-1% - +2%
-0.23ms - +0.57ms
preact-main29.76ms - 30.35msunsure 🔍
-2% - +1%
-0.57ms - +0.23ms
-

run-warmup-1

VersionAvg timevs preact-localvs preact-main
preact-local34.92ms - 36.16ms-unsure 🔍
-0% - +5%
+0.00ms - +1.75ms
preact-main34.06ms - 35.28msfaster ✔
0% - 5%
0.00ms - 1.75ms
-

run-warmup-2

VersionAvg timevs preact-localvs preact-main
preact-local25.45ms - 25.91ms-unsure 🔍
-2% - +1%
-0.50ms - +0.24ms
preact-main25.52ms - 26.10msunsure 🔍
-1% - +2%
-0.24ms - +0.50ms
-

run-warmup-3

VersionAvg timevs preact-localvs preact-main
preact-local29.04ms - 30.76ms-unsure 🔍
-4% - +4%
-1.35ms - +1.12ms
preact-main29.13ms - 30.89msunsure 🔍
-4% - +5%
-1.12ms - +1.35ms
-

run-warmup-4

VersionAvg timevs preact-localvs preact-main
preact-local20.20ms - 20.61ms-unsure 🔍
-3% - +0%
-0.67ms - +0.01ms
preact-main20.46ms - 21.01msunsure 🔍
-0% - +3%
-0.01ms - +0.67ms
-

run-final

VersionAvg timevs preact-localvs preact-main
preact-local23.83ms - 25.14ms-unsure 🔍
-3% - +5%
-0.67ms - +1.11ms
preact-main23.66ms - 24.87msunsure 🔍
-5% - +3%
-1.11ms - +0.67ms
-
text-update

duration

VersionAvg timevs preact-localvs preact-main
preact-local1.92ms - 2.05ms-unsure 🔍
-5% - +4%
-0.10ms - +0.09ms
preact-main1.92ms - 2.06msunsure 🔍
-4% - +5%
-0.09ms - +0.10ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.07ms - 1.08ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main1.07ms - 1.08msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
todo

duration

VersionAvg timevs preact-localvs preact-main
preact-local33.27ms - 33.60ms-unsure 🔍
-2% - +0%
-0.76ms - +0.00ms
preact-main33.47ms - 34.15msunsure 🔍
-0% - +2%
-0.00ms - +0.76ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.19ms - 1.19ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main1.19ms - 1.19msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
update10th1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local31.88ms - 32.78ms-unsure 🔍
-3% - +2%
-1.13ms - +0.53ms
preact-main31.92ms - 33.32msunsure 🔍
-2% - +3%
-0.53ms - +1.13ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.48ms - 3.49ms-unsure 🔍
-0% - +0%
-0.00ms - +0.01ms
preact-main3.48ms - 3.49msunsure 🔍
-0% - +0%
-0.01ms - +0.00ms
-

tachometer-reporter-action v2 for Benchmarks

Copy link

github-actions bot commented Sep 12, 2024

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

Copy link
Member

@marvinhagemeister marvinhagemeister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea!

@coveralls
Copy link

Coverage Status

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

@coveralls
Copy link

Coverage Status

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

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

rschristian commented Sep 12, 2024

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
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add SSR hydration mismatch errors
4 participants