Problem: Functional components recreate their VDOM from scratch on every render. This discards any worker-generated IDs that were synced back to the component's vdom object. When a subsequent update occurs, the VDOM worker receives a keyless VDOM tree, which it must compare against the old, keyed vnode tree. This leads to inefficient diffing, causing the VDOM engine to generate excessive removeNode and insertNode deltas instead of minimal, targeted updates. This forces developers to manually add stable ids to all conditional child nodes as a workaround.
Solution: Inside src/functional/component/Base.mjs, modify the onEffectRunStateChange() method. Just before updateVdom() is called, add a call to me.syncVdomIds().
This will "re-hydrate" the newly created, keyless VDOM with the stable IDs from the previously rendered vnode tree. This ensures that the VDOM worker always receives a fully-keyed VDOM, allowing it to perform a hyper-efficient diff and generate minimal, correct deltas.
Benefits:
- Improved Performance: Drastically reduces the number of deltas for functional component updates.
- Enhanced Developer Experience: Removes the requirement for developers to manually add stable ids to child nodes in functional components.
- Encreased Robustness: Centralizes the ID synchronization logic within the
FunctionalBase class, making all functional components more stable by default.
File to Change: src/functional/component/Base.mjs
Problem: Functional components recreate their VDOM from scratch on every render. This discards any worker-generated IDs that were synced back to the component's
vdomobject. When a subsequent update occurs, the VDOM worker receives a keyless VDOM tree, which it must compare against the old, keyedvnodetree. This leads to inefficient diffing, causing the VDOM engine to generate excessiveremoveNodeandinsertNodedeltas instead of minimal, targeted updates. This forces developers to manually add stableidsto all conditional child nodes as a workaround.Solution: Inside src/functional/component/Base.mjs, modify the onEffectRunStateChange() method. Just before
updateVdom()is called, add a call tome.syncVdomIds().This will "re-hydrate" the newly created, keyless VDOM with the stable IDs from the previously rendered vnode tree. This ensures that the VDOM worker always receives a fully-keyed VDOM, allowing it to perform a hyper-efficient diff and generate minimal, correct deltas.
Benefits:
FunctionalBaseclass, making all functional components more stable by default.File to Change: src/functional/component/Base.mjs