Difference in DOM diffing compared to React
See original GitHub issueI noticed this different behaviour in reconciliation between Preact and React. Here are the 2 demos:
Instructions: Click on the button to see the difference. Preact: https://codesandbox.io/s/61nk3p4z1r React: https://codesandbox.io/s/mymwzvnx28
Split
component add a resizable gutter through out-of-react dom changes. In React, the dom changes stay after state changes (on pressing the button). Whereas in Preact, they vanish.
I believe Preact’s behavior is correct, but not sure 😐
Thoughts?
Issue Analytics
- State:
- Created 5 years ago
- Comments:12 (9 by maintainers)
Top Results From Across the Web
Reconciliation - React
When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements....
Read more >How Virtual-DOM and diffing works in React - Medium
Compares the previous internal instance with the next internal instance. Updates the internal Instance which is a Component Tree structure in ...
Read more >React, "Diffing" and the DOM - DEV Community
"Diffing". The process of checking the difference between the new VDOM tree and the old VDOM tree is called "diffing". Diffing is accomplished ......
Read more >Understand Keys, Virtual DOM, Reconciliation, and Diffing in ...
When diffing children of a DOM node, React compares children of both lists and generates a mutation whenever there's a difference.
Read more >React's Diffing Algorithm - JavaScript in Plain English
According to its publicly available documentation, React uses a method called the diffing algorithm to compare the old DOM to the new.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The diff is supposed to skip elements not created by preact, but it looks like changes in 8.0 added a way for that to be bypassed. Specifically,
originalChildren
points to the complete list of Element childNodes without any filtering to include only nodes created by preact. During child reordering traversal, we access this list based on index without passing over externally created nodes. That results in the “gutter” div in this split.js library being removed here:https://github.com/developit/preact/blob/377e31b5c6d42c4ca92085571d5d4f0c9dbe4ba2/src/vdom/diff.js#L245
The issue is, innerDiffNode can’t use a filtered Array of Nodes in place of its current
.childNodes
reference, because we rely on the semantics of it being a Live NodeList. For now, that means something like this will be required:Closing, I can’t reproduce the original issue anymore with the code in
master
🎉