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.

Sign up for GitHub

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

Jump to bottom

fix: ordering issue with Component re-render #4125

Merged
merged 3 commits into from
Sep 3, 2023
Merged

fix: ordering issue with Component re-render #4125

merged 3 commits into from
Sep 3, 2023

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Sep 1, 2023 •
edited

When we have a Fragment as the top-level return from a render function we assign the underlying dom-children with the rendering function as their _parent. This however means that when we run getDomSibling like we do in our null placeholder unmount case https://github.com/preactjs/preact/blob/main/src/diff/children.js#L114 that we will move onto the wrapping root-fragment here which can refer to a stale dom-node, in this case we should leverage the potentially set _nextDom property to ensure we transfer oldDom back into a valid state.

fixes #4123

@github-actions
Copy link

github-actions bot commented Sep 1, 2023 •
edited

📊 Tachometer Benchmark Results

Summary

duration

  • 02_replace1k: unsure 🔍 -1% - +2% (-1.76ms - +3.92ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: slower ❌ 0% - 8% (0.22ms - 3.32ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 -1% - +0% (-7.63ms - +2.79ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -3% - +1% (-0.79ms - +0.38ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -0% - +4% (-0.44ms - +5.32ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 -4% - +1% (-1.17ms - +0.42ms)
    preact-local vs preact-main
  • text_update: unsure 🔍 -0% - +7% (-0.00ms - +0.22ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -0% - +1% (-0.12ms - +0.50ms)
    preact-local vs preact-main

usedJSHeapSize

  • 02_replace1k: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
    preact-local vs preact-main
  • 03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
    preact-local vs preact-main
  • 07_create10k: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-main
  • filter_list: unsure 🔍 -3% - +1% (-0.04ms - +0.02ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -0% - +0% (-0.02ms - +0.02ms)
    preact-local vs preact-main
  • many_updates: unsure 🔍 -1% - +0% (-0.03ms - +0.02ms)
    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

Results

02_replace1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main166.26ms - 170.29ms-unsure 🔍
-2% - +1%
-3.92ms - +1.76ms		unsure 🔍
-2% - +2%
-2.88ms - +2.55ms
preact-local167.36ms - 171.36msunsure 🔍
-1% - +2%
-1.76ms - +3.92ms		-unsure 🔍
-1% - +2%
-1.79ms - +3.63ms
preact-hooks166.61ms - 170.27msunsure 🔍
-2% - +2%
-2.55ms - +2.88ms		unsure 🔍
-2% - +1%
-3.63ms - +1.79ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.28ms - 3.29ms-unsure 🔍
-0% - +0%
-0.01ms - +0.01ms		faster ✔
1% - 1%
0.02ms - 0.03ms
preact-local3.28ms - 3.29msunsure 🔍
-0% - +0%
-0.01ms - +0.01ms		-faster ✔
1% - 1%
0.02ms - 0.03ms
preact-hooks3.31ms - 3.31msslower ❌
1% - 1%
0.02ms - 0.03ms		slower ❌
1% - 1%
0.02ms - 0.03ms		-

run-warmup-0

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main54.45ms - 56.89ms-unsure 🔍
-4% - +2%
-2.10ms - +1.19ms		faster ✔
1% - 7%
0.65ms - 4.07ms
preact-local55.02ms - 57.23msunsure 🔍
-2% - +4%
-1.19ms - +2.10ms		-faster ✔
1% - 6%
0.28ms - 3.54ms
preact-hooks56.84ms - 59.23msslower ❌
1% - 7%
0.65ms - 4.07ms		slower ❌
0% - 6%
0.28ms - 3.54ms		-

run-warmup-1

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main75.14ms - 78.25ms-unsure 🔍
-4% - +2%
-3.22ms - +1.24ms		unsure 🔍
-5% - +1%
-3.74ms - +0.62ms
preact-local76.09ms - 79.29msunsure 🔍
-2% - +4%
-1.24ms - +3.22ms		-unsure 🔍
-4% - +2%
-2.78ms - +1.65ms
preact-hooks76.72ms - 79.78msunsure 🔍
-1% - +5%
-0.62ms - +3.74ms		unsure 🔍
-2% - +4%
-1.65ms - +2.78ms		-

run-warmup-2

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main56.59ms - 59.42ms-unsure 🔍
-0% - +6%
-0.16ms - +3.29ms		unsure 🔍
-2% - +5%
-0.97ms - +2.77ms
preact-local55.45ms - 57.43msunsure 🔍
-6% - +0%
-3.29ms - +0.16ms		-unsure 🔍
-4% - +2%
-2.24ms - +0.90ms
preact-hooks55.89ms - 58.33msunsure 🔍
-5% - +2%
-2.77ms - +0.97ms		unsure 🔍
-2% - +4%
-0.90ms - +2.24ms		-

run-warmup-3

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main56.24ms - 58.88ms-unsure 🔍
-1% - +5%
-0.70ms - +2.75ms		faster ✔
2% - 9%
1.31ms - 5.39ms
preact-local55.42ms - 57.65msunsure 🔍
-5% - +1%
-2.75ms - +0.70ms		-faster ✔
4% - 10%
2.46ms - 6.29ms
preact-hooks59.35ms - 62.47msslower ❌
2% - 9%
1.31ms - 5.39ms		slower ❌
4% - 11%
2.46ms - 6.29ms		-

run-warmup-4

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main58.38ms - 60.82ms-unsure 🔍
-4% - +2%
-2.11ms - +1.36ms		unsure 🔍
-5% - +1%
-2.92ms - +0.88ms
preact-local58.74ms - 61.21msunsure 🔍
-2% - +4%
-1.36ms - +2.11ms		-unsure 🔍
-4% - +2%
-2.55ms - +1.26ms
preact-hooks59.17ms - 62.08msunsure 🔍
-1% - +5%
-0.88ms - +2.92ms		unsure 🔍
-2% - +4%
-1.26ms - +2.55ms		-

run-final

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main43.04ms - 45.15ms-unsure 🔍
-5% - +2%
-2.43ms - +0.82ms		unsure 🔍
-4% - +3%
-1.76ms - +1.21ms
preact-local43.67ms - 46.14msunsure 🔍
-2% - +6%
-0.82ms - +2.43ms		-unsure 🔍
-2% - +5%
-1.08ms - +2.15ms
preact-hooks43.33ms - 45.41msunsure 🔍
-3% - +4%
-1.21ms - +1.76ms		unsure 🔍
-5% - +2%
-2.15ms - +1.08ms		-
03_update10th1k_x16

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main42.17ms - 44.41ms-faster ✔
1% - 7%
0.22ms - 3.32ms		unsure 🔍
-2% - +5%
-0.93ms - +2.01ms
preact-local43.98ms - 46.13msslower ❌
0% - 8%
0.22ms - 3.32ms		-slower ❌
2% - 9%
0.86ms - 3.75ms
preact-hooks41.79ms - 43.71msunsure 🔍
-5% - +2%
-2.01ms - +0.93ms		faster ✔
2% - 8%
0.86ms - 3.75ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main3.23ms - 3.24ms-unsure 🔍
-0% - +0%
-0.01ms - +0.00ms		faster ✔
1% - 1%
0.02ms - 0.03ms
preact-local3.24ms - 3.25msunsure 🔍
-0% - +0%
-0.00ms - +0.01ms		-faster ✔
0% - 1%
0.02ms - 0.03ms
preact-hooks3.26ms - 3.27msslower ❌
1% - 1%
0.02ms - 0.03ms		slower ❌
0% - 1%
0.02ms - 0.03ms		-
07_create10k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1209.65ms - 1217.98ms-unsure 🔍
-0% - +1%
-2.79ms - +7.63ms		unsure 🔍
-1% - +0%
-8.35ms - +3.82ms
preact-local1208.27ms - 1214.53msunsure 🔍
-1% - +0%
-7.63ms - +2.79ms		-unsure 🔍
-1% - +0%
-10.11ms - +0.75ms
preact-hooks1211.64ms - 1220.52msunsure 🔍
-0% - +1%
-3.82ms - +8.35ms		unsure 🔍
-0% - +1%
-0.75ms - +10.11ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main25.33ms - 25.34ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		unsure 🔍
-0% - -0%
-0.03ms - -0.02ms
preact-local25.33ms - 25.34msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-unsure 🔍
-0% - -0%
-0.03ms - -0.02ms
preact-hooks25.35ms - 25.36msunsure 🔍
+0% - +0%
+0.02ms - +0.03ms		unsure 🔍
+0% - +0%
+0.02ms - +0.03ms		-
filter_list

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main26.36ms - 27.36ms-unsure 🔍
-1% - +3%
-0.38ms - +0.79ms		unsure 🔍
-4% - +1%
-1.07ms - +0.31ms
preact-local26.35ms - 26.95msunsure 🔍
-3% - +1%
-0.79ms - +0.38ms		-faster ✔
0% - 4%
0.02ms - 1.15ms
preact-hooks26.76ms - 27.71msunsure 🔍
-1% - +4%
-0.31ms - +1.07ms		slower ❌
0% - 4%
0.02ms - 1.15ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main1.45ms - 1.49ms-unsure 🔍
-1% - +3%
-0.02ms - +0.04ms		unsure 🔍
-3% - +0%
-0.05ms - +0.01ms
preact-local1.44ms - 1.48msunsure 🔍
-3% - +1%
-0.04ms - +0.02ms		-faster ✔
0% - 4%
0.00ms - 0.06ms
preact-hooks1.47ms - 1.51msunsure 🔍
-0% - +3%
-0.01ms - +0.05ms		slower ❌
0% - 4%
0.00ms - 0.06ms		-
hydrate1k

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main141.42ms - 145.32ms-unsure 🔍
-4% - +0%
-5.32ms - +0.44ms		unsure 🔍
-2% - +1%
-2.93ms - +2.05ms
preact-local143.69ms - 147.93msunsure 🔍
-0% - +4%
-0.44ms - +5.32ms		-unsure 🔍
-0% - +3%
-0.62ms - +4.63ms
preact-hooks142.26ms - 145.36msunsure 🔍
-1% - +2%
-2.05ms - +2.93ms		unsure 🔍
-3% - +0%
-4.63ms - +0.62ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main5.91ms - 5.93ms-unsure 🔍
-0% - +0%
-0.02ms - +0.02ms		faster ✔
0% - 1%
0.01ms - 0.05ms
preact-local5.91ms - 5.93msunsure 🔍
-0% - +0%
-0.02ms - +0.02ms		-faster ✔
0% - 1%
0.01ms - 0.04ms
preact-hooks5.94ms - 5.96msslower ❌
0% - 1%
0.01ms - 0.05ms		slower ❌
0% - 1%
0.01ms - 0.04ms		-
many_updates

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main32.14ms - 33.39ms-unsure 🔍
-1% - +4%
-0.42ms - +1.17ms		unsure 🔍
-1% - +4%
-0.24ms - +1.22ms
preact-local31.89ms - 32.88msunsure 🔍
-4% - +1%
-1.17ms - +0.42ms		-unsure 🔍
-2% - +2%
-0.50ms - +0.73ms
preact-hooks31.90ms - 32.65msunsure 🔍
-4% - +1%
-1.22ms - +0.24ms		unsure 🔍
-2% - +2%
-0.73ms - +0.50ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main4.49ms - 4.52ms-unsure 🔍
-0% - +1%
-0.02ms - +0.03ms		faster ✔
0% - 1%
0.00ms - 0.05ms
preact-local4.48ms - 4.51msunsure 🔍
-1% - +0%
-0.03ms - +0.02ms		-faster ✔
0% - 1%
0.01ms - 0.05ms
preact-hooks4.51ms - 4.54msslower ❌
0% - 1%
0.00ms - 0.05ms		slower ❌
0% - 1%
0.01ms - 0.05ms		-
text_update

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main2.95ms - 3.08ms-unsure 🔍
-7% - +0%
-0.22ms - +0.00ms		faster ✔
7% - 12%
0.23ms - 0.40ms
preact-local3.03ms - 3.22msunsure 🔍
-0% - +7%
-0.00ms - +0.22ms		-faster ✔
3% - 10%
0.09ms - 0.32ms
preact-hooks3.27ms - 3.39msslower ❌
7% - 14%
0.23ms - 0.40ms		slower ❌
3% - 10%
0.09ms - 0.32ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.65ms - 0.65ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		faster ✔
6% - 8%
0.04ms - 0.06ms
preact-local0.65ms - 0.65msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-faster ✔
7% - 8%
0.05ms - 0.06ms
preact-hooks0.69ms - 0.71msslower ❌
7% - 9%
0.04ms - 0.06ms		slower ❌
7% - 9%
0.05ms - 0.06ms		-
todo

duration

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main43.11ms - 43.51ms-unsure 🔍
-1% - +0%
-0.50ms - +0.12ms		faster ✔
2% - 4%
1.03ms - 1.70ms
preact-local43.27ms - 43.73msunsure 🔍
-0% - +1%
-0.12ms - +0.50ms		-faster ✔
2% - 3%
0.82ms - 1.53ms
preact-hooks44.41ms - 44.94msslower ❌
2% - 4%
1.03ms - 1.70ms		slower ❌
2% - 4%
0.82ms - 1.53ms		-

usedJSHeapSize

VersionAvg timevs preact-mainvs preact-localvs preact-hooks
preact-main0.83ms - 0.83ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms		faster ✔
2% - 4%
0.02ms - 0.03ms
preact-local0.83ms - 0.83msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms		-faster ✔
2% - 4%
0.02ms - 0.03ms
preact-hooks0.85ms - 0.86msslower ❌
2% - 4%
0.02ms - 0.03ms		slower ❌
2% - 4%
0.02ms - 0.03ms		-

tachometer-reporter-action v2 for Benchmarks

@github-actions
Copy link

github-actions bot commented Sep 1, 2023 •
edited

Size Change: +30 B (0%)

Total Size: 57 kB

Filename Size Change
dist/preact.js 4.37 kB +5 B (0%)
dist/preact.min.js 4.4 kB +5 B (0%)
dist/preact.min.module.js 4.4 kB +5 B (0%)
dist/preact.min.umd.js 4.43 kB +3 B (0%)
dist/preact.module.js 4.4 kB +6 B (0%)
dist/preact.umd.js 4.44 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size Change
compat/dist/compat.js 3.95 kB 0 B
compat/dist/compat.module.js 3.87 kB 0 B
compat/dist/compat.umd.js 4.01 kB 0 B
debug/dist/debug.js 3.53 kB 0 B
debug/dist/debug.module.js 3.52 kB 0 B
debug/dist/debug.umd.js 3.61 kB 0 B
devtools/dist/devtools.js 232 B 0 B
devtools/dist/devtools.module.js 240 B 0 B
devtools/dist/devtools.umd.js 315 B 0 B
hooks/dist/hooks.js 1.53 kB 0 B
hooks/dist/hooks.module.js 1.56 kB 0 B
hooks/dist/hooks.umd.js 1.62 kB 0 B
jsx-runtime/dist/jsxRuntime.js 360 B 0 B
jsx-runtime/dist/jsxRuntime.module.js 326 B 0 B
jsx-runtime/dist/jsxRuntime.umd.js 441 B 0 B
test-utils/dist/testUtils.js 453 B 0 B
test-utils/dist/testUtils.module.js 454 B 0 B
test-utils/dist/testUtils.umd.js 536 B 0 B

compressed-size-action

JoviDeCroock
JoviDeCroock commented Sep 1, 2023
View reviewed changes
src/diff/children.js
@@ -111,6 +111,7 @@ export function diffChildren(
oldVNode = oldChildren[i];
if (oldVNode && oldVNode.key == null && oldVNode._dom) {
if (oldVNode._dom == oldDom) {
oldVNode._parent = oldParentVNode;
Copy link
Member Author

Choose a reason for hiding this comment

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

I am currently trying to figure out why this part matters but it looks like oldVNode._parent refers to the new version of the parent-vnode here

marvinhagemeister
marvinhagemeister approved these changes Sep 2, 2023
View reviewed changes
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 catch!!

@JoviDeCroock JoviDeCroock merged commit 7a3706a into main Sep 3, 2023
13 checks passed
@JoviDeCroock JoviDeCroock deleted the fix-issue branch September 3, 2023 06:57
@gpoitch
Copy link
Contributor

gpoitch commented Sep 27, 2023

Hoping for a release with this fix when you guys get a chance, thanks! 🙏

@JoviDeCroock JoviDeCroock mentioned this pull request Sep 28, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marvinhagemeister marvinhagemeister marvinhagemeister approved these changes

@developit developit Awaiting requested review from developit

@andrewiggins andrewiggins Awaiting requested review from andrewiggins

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Ordering of children in a Fragment changes in re-renders
3 participants
@JoviDeCroock @gpoitch @marvinhagemeister