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

Recreate unkeyed functional components when they change position. #4550

Merged
merged 3 commits into from
Nov 11, 2024

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Nov 10, 2024

With keyed children we can confidently track them as they move throughout an array of components. When this happens with unkeyed functional components we should not risk reusing the state as that could possibly make us re-use state in unrelated components, as seen in #2949.

With skew based diffing we can be sure that we account for offsets in our children arrays so this change should be quite safe.

Prior to this change we could have cases where

<Component="x" />
null

Becomes

null
<Component prop="y" />

We'd reuse the component state from the first instance for the second one which is dangerous, we should always recreate unkeyed children.

Now there are exceptions to this, imagine we insert a <div /> in front of this then we want <Component="x" /> to retain its state, thanks to our skew based diffing that will be the case.

Fixes #2949
Supersedes #2955

Copy link

github-actions bot commented Nov 10, 2024

📊 Tachometer Benchmark Results

Summary

⏳ Benchmarks are currently running. Results below are out of date.

duration

  • create10k: unsure 🔍 -0% - +1% (-1.14ms - +5.20ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -1% - +1% (-0.21ms - +0.09ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -2% - +2% (-1.54ms - +1.62ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -2% - +0% (-0.33ms - +0.06ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -4% - +0% (-2.79ms - +0.23ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -5% - +5% (-0.10ms - +0.10ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -3% - +1% (-0.90ms - +0.33ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -2% - +4% (-0.54ms - +1.27ms)
    preact-local vs preact-main

usedJSHeapSize

  • create10k: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -1% - +1% (-0.02ms - +0.01ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -3% - +2% (-0.41ms - +0.33ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -1% - +0% (-0.03ms - +0.02ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -1% - +1% (-0.02ms - +0.03ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -0% - +1% (-0.00ms - +0.01ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -2% - +1% (-0.02ms - +0.01ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -1% - +0% (-0.02ms - +0.02ms)
    preact-local vs preact-main

Results

⏳ Benchmarks are currently running. Results below are out of date.
create10k

duration

VersionAvg timevs preact-localvs preact-main
preact-local929.44ms - 935.28ms-unsure 🔍
-0% - +1%
-1.14ms - +5.20ms
preact-main929.10ms - 931.57msunsure 🔍
-1% - +0%
-5.20ms - +1.14ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local25.28ms - 25.28ms-unsure 🔍
+0% - +0%
+0.00ms - +0.00ms
preact-main25.28ms - 25.28msunsure 🔍
-0% - -0%
-0.00ms - -0.00ms
-
filter-list

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.57ms - 16.62ms-unsure 🔍
-1% - +1%
-0.21ms - +0.09ms
preact-main16.51ms - 16.80msunsure 🔍
-1% - +1%
-0.09ms - +0.21ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.66ms - 1.67ms-unsure 🔍
-1% - +1%
-0.02ms - +0.01ms
preact-main1.66ms - 1.68msunsure 🔍
-1% - +1%
-0.01ms - +0.02ms
-
hydrate1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local69.41ms - 71.79ms-unsure 🔍
-2% - +2%
-1.54ms - +1.62ms
preact-main69.52ms - 71.60msunsure 🔍
-2% - +2%
-1.62ms - +1.54ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local12.80ms - 13.49ms-unsure 🔍
-3% - +2%
-0.41ms - +0.33ms
preact-main13.06ms - 13.33msunsure 🔍
-2% - +3%
-0.33ms - +0.41ms
-
many-updates

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.31ms - 16.66ms-unsure 🔍
-2% - +0%
-0.33ms - +0.06ms
preact-main16.54ms - 16.71msunsure 🔍
-0% - +2%
-0.06ms - +0.33ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local4.58ms - 4.61ms-unsure 🔍
-1% - +0%
-0.03ms - +0.02ms
preact-main4.58ms - 4.61msunsure 🔍
-0% - +1%
-0.02ms - +0.03ms
-
replace1k
  • Browser: chrome-headless
  • Sample size: 100
  • Built by: CI #4028
  • Commit: 593f758

duration

VersionAvg timevs preact-localvs preact-main
preact-local75.90ms - 77.97ms-unsure 🔍
-4% - +0%
-2.79ms - +0.23ms
preact-main77.11ms - 79.31msunsure 🔍
-0% - +4%
-0.23ms - +2.79ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.57ms - 3.60ms-unsure 🔍
-1% - +1%
-0.02ms - +0.03ms
preact-main3.56ms - 3.60msunsure 🔍
-1% - +1%
-0.03ms - +0.02ms
-

run-warmup-0

VersionAvg timevs preact-localvs preact-main
preact-local31.45ms - 32.09ms-slower ❌
0% - 3%
0.16ms - 1.02ms
preact-main30.88ms - 31.47msfaster ✔
1% - 3%
0.16ms - 1.02ms
-

run-warmup-1

VersionAvg timevs preact-localvs preact-main
preact-local35.71ms - 37.22ms-unsure 🔍
-2% - +4%
-0.67ms - +1.32ms
preact-main35.50ms - 36.79msunsure 🔍
-4% - +2%
-1.32ms - +0.67ms
-

run-warmup-2

VersionAvg timevs preact-localvs preact-main
preact-local26.28ms - 26.69ms-unsure 🔍
-2% - +0%
-0.65ms - +0.02ms
preact-main26.54ms - 27.06msunsure 🔍
-0% - +2%
-0.02ms - +0.65ms
-

run-warmup-3

VersionAvg timevs preact-localvs preact-main
preact-local27.20ms - 28.68ms-faster ✔
1% - 9%
0.29ms - 2.56ms
preact-main28.50ms - 30.23msslower ❌
1% - 9%
0.29ms - 2.56ms
-

run-warmup-4

VersionAvg timevs preact-localvs preact-main
preact-local20.64ms - 21.16ms-unsure 🔍
-3% - +0%
-0.64ms - +0.09ms
preact-main20.92ms - 21.43msunsure 🔍
-0% - +3%
-0.09ms - +0.64ms
-

run-final

VersionAvg timevs preact-localvs preact-main
preact-local23.17ms - 23.72ms-unsure 🔍
-3% - +1%
-0.64ms - +0.18ms
preact-main23.37ms - 23.98msunsure 🔍
-1% - +3%
-0.18ms - +0.64ms
-
text-update
  • Browser: chrome-headless
  • Sample size: 190
  • Built by: CI #4028
  • Commit: 593f758

duration

VersionAvg timevs preact-localvs preact-main
preact-local2.13ms - 2.26ms-unsure 🔍
-5% - +5%
-0.10ms - +0.10ms
preact-main2.12ms - 2.27msunsure 🔍
-5% - +5%
-0.10ms - +0.10ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.10ms - 1.11ms-unsure 🔍
-0% - +1%
-0.00ms - +0.01ms
preact-main1.10ms - 1.11msunsure 🔍
-1% - +0%
-0.01ms - +0.00ms
-
todo

duration

VersionAvg timevs preact-localvs preact-main
preact-local33.61ms - 34.20ms-unsure 🔍
-3% - +1%
-0.90ms - +0.33ms
preact-main33.65ms - 34.74msunsure 🔍
-1% - +3%
-0.33ms - +0.90ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.22ms - 1.23ms-unsure 🔍
-2% - +1%
-0.02ms - +0.01ms
preact-main1.22ms - 1.25msunsure 🔍
-1% - +2%
-0.01ms - +0.02ms
-
update10th1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local33.22ms - 34.50ms-unsure 🔍
-2% - +4%
-0.54ms - +1.27ms
preact-main32.85ms - 34.13msunsure 🔍
-4% - +2%
-1.27ms - +0.54ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.52ms - 3.55ms-unsure 🔍
-1% - +0%
-0.02ms - +0.02ms
preact-main3.52ms - 3.55msunsure 🔍
-0% - +1%
-0.02ms - +0.02ms
-

tachometer-reporter-action v2 for CI

Copy link

github-actions bot commented Nov 10, 2024

Size Change: +70 B (+0.11%)

Total Size: 62.3 kB

Filename Size Change
dist/preact.js 4.69 kB +12 B (+0.26%)
dist/preact.min.js 4.72 kB +12 B (+0.25%)
dist/preact.min.module.js 4.72 kB +14 B (+0.3%)
dist/preact.min.umd.js 4.75 kB +9 B (+0.19%)
dist/preact.module.js 4.71 kB +12 B (+0.26%)
dist/preact.umd.js 4.76 kB +11 B (+0.23%)
ℹ️ View Unchanged
Filename Size
compat/dist/compat.js 4.13 kB
compat/dist/compat.module.js 4.05 kB
compat/dist/compat.umd.js 4.19 kB
debug/dist/debug.js 3.82 kB
debug/dist/debug.module.js 3.83 kB
debug/dist/debug.umd.js 3.9 kB
devtools/dist/devtools.js 260 B
devtools/dist/devtools.module.js 274 B
devtools/dist/devtools.umd.js 346 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 976 B
jsx-runtime/dist/jsxRuntime.module.js 949 B
jsx-runtime/dist/jsxRuntime.umd.js 1.05 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

@coveralls
Copy link

coveralls commented Nov 10, 2024

Coverage Status

coverage: 99.488%. remained the same
when pulling 7ec7465 on recreate-unkeyed-swaps
into 3a95fc1 on main.

With keyed children we can confidently track them as they move
throughout an array of components. When this happens with unkeyed
functional components we should not risk reusing the state as that
could possibly make us re-use state in unrelated components, as
seen in #2949.
@JoviDeCroock JoviDeCroock force-pushed the recreate-unkeyed-swaps branch from 4c8da0e to b8606e6 Compare November 10, 2024 17:38
Copy link
Member

@rschristian rschristian left a comment

Choose a reason for hiding this comment

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

Damn, great find!

@JoviDeCroock JoviDeCroock merged commit 84dcf74 into main Nov 11, 2024
13 checks passed
@JoviDeCroock JoviDeCroock deleted the recreate-unkeyed-swaps branch November 11, 2024 06:42
@JoviDeCroock JoviDeCroock mentioned this pull request Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants