Keyed nullish placeholders cause re-mounts #4700
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📊 Tachometer Benchmark ResultsSummaryduration
usedJSHeapSize
Resultscreate10kduration
usedJSHeapSize
filter-listduration
usedJSHeapSize
hydrate1kduration
usedJSHeapSize
many-updatesduration
usedJSHeapSize
replace1kduration
usedJSHeapSize
run-warmup-0
run-warmup-1
run-warmup-2
run-warmup-3
run-warmup-4
run-final
text-updateduration
usedJSHeapSize
tododuration
usedJSHeapSize
update10th1kduration
usedJSHeapSize
|
|
Size Change: +95 B (+0.12%) Total Size: 78.4 kB
ℹ️ View Unchanged
|
JoviDeCroock
commented
Feb 20, 2025
JoviDeCroock
commented
Feb 21, 2025
JoviDeCroock
force-pushed
the
falsy-replacement
branch
from
34de43d to
01b42a9
Compare
JoviDeCroock
changed the title
marvinhagemeister
approved these changes
Feb 21, 2025
Member
marvinhagemeister
left a comment
marvinhagemeister
left a comment
There was a problem hiding this comment.
LGTM, surprised how little changes were needed. Great job!
rschristian
approved these changes
Feb 21, 2025
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #4699 and a whole lot more
There's a few cases that get solved in this PR, let's go over them!
First and foremost, the issue points us at an issue where having a null'ish middle node can lead to false positives. In the example we have one keyed node like the following
When we create this initially we'll see 3 creations for A, B and B. This is expected, when we swap out CompA by changing its key to i.e. 2 we expect that the only new creation we'll see is from
<CompA />, however this is not the case we'll also remount one of the two<CompB />nodes and reset their state if they are using state which is unexpected.This is caused by the following:
<CompB />withnull, this means that we'll erroneously assume we swapped out<CompB />with null which makes us unmount it.We fix the above by adding a check in the mount case that does the following
This made me start looking into non-keyed cases and indeed, this issue existed in the unkeyed case as well which luckily is also fixed with the above measure. I've added tests for all of these cases. When digging even deeper I found some general issues with how we handle placeholders (aka holes in our array). Generally when we replace a keyed node, append or prepend with a placeholder we see re-mounting issues. I've counter-acted that by replacing our
nullcase in the child-matching with a&& !keycondition, this means that for keyed nodes we'll always search the children as this is kind of the goal of keys, we can move them around without fear.