Always clone VNodes before using them

jsx-runtime/src/index.js

@@ -43,17 +43,9 @@ function createVNode(type, props, key, __self, __source) {
  props: normalizedProps,
  key,
  ref,
- _children: null,
- _parent: null,
- _depth: 0,
- _dom: null,
- _nextDom: undefined,
- _component: null,
- _hydrating: null,
- constructor: undefined,
- _original: --vnodeId,
  __source,
- __self
+ __self,
+ constructor: undefined
  };
 
  // If a Component VNode, check for and apply defaultProps.

src/create-element.js

@@ -37,7 +37,15 @@ export function createElement(type, props, children) {
  }
  }
 
- return createVNode(type, normalizedProps, key, ref, null);
+ const vnode = {
+ type,
+ props: normalizedProps,
+ key,
+ ref,
+ constructor: undefined
+ };
+ if (options.vnode) options.vnode(vnode);
+ return vnode;
 }
 
 /**
@@ -75,9 +83,6 @@ export function createVNode(type, props, key, ref, original) {
  _original: original == null ? ++vnodeId : original
  };
 
- // Only invoke the vnode hook if this was *not* a direct copy:
- if (original == null && options.vnode != null) options.vnode(vnode);
-
  return vnode;
 }
 

src/diff/children.js

@@ -48,7 +48,7 @@ export function diffChildren(
  childVNode = renderResult[i];
 
  if (childVNode == null || typeof childVNode == 'boolean') {
- childVNode = newParentVNode._children[i] = null;
+ childVNode = null;
  }
  // If this newVNode is being reused (e.g. <div>{reuse}{reuse}</div>) in the same diff,
  // or we are rendering a component (e.g. setState) copy the oldVNodes so it can have
@@ -59,36 +59,36 @@ export function diffChildren(
  // eslint-disable-next-line valid-typeof
  typeof childVNode == 'bigint'
  ) {
- childVNode = newParentVNode._children[i] = createVNode(
+ childVNode = createVNode(
  null,
  childVNode,
  null,
  null,
  childVNode
  );
  } else if (Array.isArray(childVNode)) {
- childVNode = newParentVNode._children[i] = createVNode(
+ childVNode = createVNode(
  Fragment,
  { children: childVNode },
  null,
  null,
  null
  );
- } else if (childVNode._depth > 0) {
- // VNode is already in use, clone it. This can happen in the following
- // scenario:
+ } else {
+ // Always clone VNodes to ensure our own copy within the tree.
+ // This avoids clobbering VNodes used in multiple places:
  // const reuse = <div />
  // <div>{reuse}<span />{reuse}</div>
- childVNode = newParentVNode._children[i] = createVNode(
+ childVNode = createVNode(
  childVNode.type,
  childVNode.props,
  childVNode.key,
  childVNode.ref ? childVNode.ref : null,
  childVNode._original
  );
- } else {
- childVNode = newParentVNode._children[i] = childVNode;
  }
+
+ newParentVNode._children[i] = childVNode;
 
  // Terser removes the `continue` here and wraps the loop body
  // in a `if (childVNode) { ... } condition