-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
remove _nextDom resetting as it collides with nested fragment switching #3738
Conversation
📊 Tachometer Benchmark ResultsSummaryduration
usedJSHeapSize
Results02_replace1k
duration
usedJSHeapSize
run-warmup-0
run-warmup-1
run-warmup-2
run-warmup-3
run-warmup-4
run-final
03_update10th1k_x16
duration
usedJSHeapSize
07_create10k
duration
usedJSHeapSize
filter_list
duration
usedJSHeapSize
hydrate1k
duration
usedJSHeapSize
many_updates
duration
usedJSHeapSize
text_update
duration
usedJSHeapSize
todo
duration
usedJSHeapSize
|
Size Change: -149 B (0%) Total Size: 52.9 kB
ℹ️ View Unchanged
|
@@ -237,7 +237,9 @@ describe('Fragment', () => { | |||
expectDomLogToBe([ | |||
'<div>.appendChild(#text)', | |||
'<div>122.insertBefore(<div>1, <span>1)', | |||
'<span>1.remove()' | |||
'<span>1.remove()', | |||
'<div>122.appendChild(<span>2)', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These seem incorrect. We're re-appending the spans even though they're already in the correct position.
The extra insertions is likely what is causing the slowdown in 03_update10th1k_x16.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yea, this was a performance optimization but it breaks unexpectedly. I can look into building some offset based calculator but generally this optimization is impossible to get right because of several reasons
- we can have nullish children
- we can have empty fragments as children
both these conditions increment the i counter meaning we will start looking for a dom-sibling in an erroneous position, hence the optimization fails in the issue-case and multiple others 😅 also this does not account for moved nodes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also do read that the DOM is still correct we just can't prevent these dupe insertions when moving
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agree, that this seems to point at a shortcoming of the current reconciler algo.
1ad2429
to
3fddb48
Compare
0a6e326
to
624fd59
Compare
…#3875) ## Why does #3814 fail on master? When transitioning from the tree ```jsx <div> <Fragment> <span>0</span> <span>1</span> </Fragment> <input /> </div> ``` to the tree (note `<span>1</span>` was unmounted) ```jsx <div> <Fragment> <span>0</span> </Fragment> <input /> </div> ``` the `master` branch has a bug where it will re-append all the children after the `Fragment`. This re-appending of the `<input>` causes it to lose focus. The reason for this re-appending is that when exiting `diffChildren` for the Fragment, it's `_nextDom` pointer is set to `<span>1</span>`. Since `<span>1</span>` is unmounted it's `parentNode` is `null`. When diffing the `input` element, we hit the `oldDom.parentNode !== parentDom` condition in `placeChild` which re-appends the `<input>` tag and sets oldDom to `null` causing all siblings of `<input>` to re-append. When diffing components/Fragments, the `_nextDom` pointer should point to where in the DOM tree the diff should continue. So when unmounting `<span>1</span>`, the Fragment's `_nextDom` should point to the `<input>` tag. The previous code in `diffChildren` removed in #3738 was intended to fix this by detecting when `_nextDom` pointed to a node that we were unmounting and reset it to it's sibling. However, that code (copied below) had a correctness bug prompting its removal (#3737). Let's look at this bug. ```js // Remove remaining oldChildren if there are any. for (i = oldChildrenLength; i--; ) { if (oldChildren[i] != null) { if ( typeof newParentVNode.type == 'function' && oldChildren[i]._dom != null && oldChildren[i]._dom == newParentVNode._nextDom ) { // If the newParentVNode.__nextDom points to a dom node that is about to // be unmounted, then get the next sibling of that vnode and set // _nextDom to it newParentVNode._nextDom = getDomSibling(oldParentVNode, i + 1); } unmount(oldChildren[i], oldChildren[i]); } } ``` ## What caused #3737? Here is a simplified repro of the issue from #3737: ```jsx function App() { const [condition] = useState(true); return this.state.condition ? ( // Initial render <> <div>1</div> <Fragment> <div>A</div> <div>B</div> </Fragment> <div>2</div> </> ) : ( // Second render: unmount <div>B and move Fragment up <> <Fragment> <div>A</div> </Fragment> <div>1</div> <div>2</div> </> ); } ``` The first render creates the DOM `1 A B 2` (each wrapped in divs) and when changing the `condition` state, it should rerender to produce `A 1 2` but instead we get `1 A 2`. Why? When rerendering `App` we unmount `<div>B</div>`, which is a child of a Fragment. This unmounting triggers the call to `getDomSibling` in the code above. `getDomSibling` has a line of code in it that looks like `vnode._parent._children.indexOf(vnode)`. This line of code doesn't work in this situation because when rerendering a component, we only make a shallow copy of the old VNode tree. So when a child of `oldParentVNode` (the `App` component in this case) tries to access it's parent through the `_parent` pointer (e.g. the `Fragment` parent of `<div>A</div>`), it's `_parent` pointer points to the new VNode tree which we are in progress of diffing and modifying. Ultimately, this tree mismatch (trying to access the old VNode tree but getting the in-progress new tree) causes us to get the wrong DOM pointer and leads to incorrect DOM ordering. In summary, when unmounting `<div>B</div>`, we need `getDomSibling` to return `<div>2</div>` since that is the next DOM sibling in the old VNode tree. Instead, because our VNode pointers are mixed at this stage of diffing, `getDomSibling` doesn't work correctly and we get back the wrong DOM element. ## Why didn't other tests catch this? Other tests only do top-level render calls (e.g. `render(<App condition={true} />)` then `render(<App condition={false} />)`) which generate brand-new VNode trees with no shared pointers. They did not test renders originating from `setState` calls which go through a different code path and reuse VNode trees which share pointers across the old and new trees. ## The fix The initial fix for this is to replace `getDomSibling` with a call to `dom.nextSibling` to get the actual next DOM sibling. (I found a situation in which this doesn't work optimally. I'll open a separate PR for that.) ## Final thoughts One additional thought I have here is that walking through this has given me more confidence in our approach for v11. First, we do unmounts before insertions so we don't have to do this additional DOM pointer checking. Also, by diffing backwards, we ensure that our `_next` pointers are correct when we go to search what DOM element to insert an element before. Fixes #3814, #3737
fixes #3737
I have tracked this down for a bit and it looks like when the _nextDom is set to
<div />
from the second render we switch it to become<p>first paragraph
which means instead of appending the<p>second paragraph
we will be adding it as the first element. If instead ofi + 1
ingetDomSibling
we sayi
it also works due to us removing thenull
element first