perf: skip VTag render for identical vnode

Author: hi-ogawa

packages/tiny-react/src/index.test.ts

@@ -68,6 +68,19 @@ describe(render, () => {
               },
               "ref": undefined,
               "type": "tag",
+              "vnode": {
+                "child": {
+                  "data": "world",
+                  "type": "text",
+                },
+                "key": undefined,
+                "name": "span",
+                "props": {
+                  "className": "text-red",
+                },
+                "ref": undefined,
+                "type": "tag",
+              },
             },
           ],
           "parent": [Circular],
@@ -96,6 +109,37 @@ describe(render, () => {
         },
         "ref": undefined,
         "type": "tag",
+        "vnode": {
+          "child": {
+            "children": [
+              {
+                "data": "hello",
+                "type": "text",
+              },
+              {
+                "child": {
+                  "data": "world",
+                  "type": "text",
+                },
+                "key": undefined,
+                "name": "span",
+                "props": {
+                  "className": "text-red",
+                },
+                "ref": undefined,
+                "type": "tag",
+              },
+            ],
+            "type": "fragment",
+          },
+          "key": undefined,
+          "name": "div",
+          "props": {
+            "className": "flex items-center gap-2",
+          },
+          "ref": undefined,
+          "type": "tag",
+        },
       }
     `);
     vnode = h.div({ className: "flex items-center gap-2" }, "reconcile");
@@ -130,6 +174,19 @@ describe(render, () => {
         },
         "ref": undefined,
         "type": "tag",
+        "vnode": {
+          "child": {
+            "data": "reconcile",
+            "type": "text",
+          },
+          "key": undefined,
+          "name": "div",
+          "props": {
+            "className": "flex items-center gap-2",
+          },
+          "ref": undefined,
+          "type": "tag",
+        },
       }
     `);
   });
@@ -174,6 +231,17 @@ describe(render, () => {
                 "props": {},
                 "ref": undefined,
                 "type": "tag",
+                "vnode": {
+                  "child": {
+                    "data": "hello",
+                    "type": "text",
+                  },
+                  "key": undefined,
+                  "name": "span",
+                  "props": {},
+                  "ref": undefined,
+                  "type": "tag",
+                },
               },
               {
                 "data": "world",
@@ -199,6 +267,33 @@ describe(render, () => {
           "props": {},
           "ref": undefined,
           "type": "tag",
+          "vnode": {
+            "child": {
+              "children": [
+                {
+                  "child": {
+                    "data": "hello",
+                    "type": "text",
+                  },
+                  "key": undefined,
+                  "name": "span",
+                  "props": {},
+                  "ref": undefined,
+                  "type": "tag",
+                },
+                {
+                  "data": "world",
+                  "type": "text",
+                },
+              ],
+              "type": "fragment",
+            },
+            "key": undefined,
+            "name": "div",
+            "props": {},
+            "ref": undefined,
+            "type": "tag",
+          },
         },
         "hookContext": HookContext {
           "hookCount": 0,

packages/tiny-react/src/reconciler.ts

@@ -49,7 +49,13 @@ function reconcileNode(
       bnode = emptyNode();
     }
   } else if (vnode.type === NODE_TYPE_TAG) {
-    if (
+    if (bnode.type === NODE_TYPE_TAG && bnode.vnode === vnode) {
+      // TODO: is it correct since immutable? but this happens only when used with `memo` wrapper?
+      // TODO: how about effect or custom component inside? (probably okay since custom component is supposed to re-render itself)
+      // TODO: can we generalize this to all node types? (probably so)
+      // TODO: can we also skip `placeChild`? (probably not. ideally for mutating path, child placing should be managed by "caller-side" e.g. Fragment?)
+      placeChild(bnode.hnode, hparent, preSlot, false);
+    } else if (
       bnode.type === NODE_TYPE_TAG &&
       bnode.key === vnode.key &&
       bnode.ref === vnode.ref &&
@@ -64,6 +70,7 @@ function reconcileNode(
         undefined,
         effectManager
       );
+      bnode.vnode = vnode;
       placeChild(bnode.hnode, hparent, preSlot, false);
     } else {
       unmount(bnode);
@@ -75,7 +82,13 @@ function reconcileNode(
         undefined,
         effectManager
       );
-      bnode = { ...vnode, child, hnode, listeners: new Map() } satisfies BTag;
+      bnode = {
+        ...vnode,
+        vnode,
+        child,
+        hnode,
+        listeners: new Map(),
+      } satisfies BTag;
       reconcileTagProps(bnode, vnode.props, {});
       placeChild(bnode.hnode, hparent, preSlot, true);
       effectManager.refNodes.push(bnode);

packages/tiny-react/src/virtual-dom.ts

@@ -76,6 +76,7 @@ export type BEmpty = VEmpty & {
 };
 
 export type BTag = Omit<VTag, "child"> & {
+  vnode: VTag;
   parent?: BNodeParent;
   child: BNode;
   hnode: HTag;