Fast track very common tag names so we can match them with plain ifs

facebook · Apr 4, 2023 · 9afe183 · 9afe183
1 parent 9c208e3
commit 9afe183
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 36 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -794,6 +794,17 @@ export function setInitialProperties(
   // TODO: Make sure that we check isMounted before firing any of these events.
 
   switch (tag) {
+    case 'div':
+    case 'span':
+    case 'svg':
+    case 'path':
+    case 'a':
+    case 'g':
+    case 'p':
+    case 'li': {
+      // Fast track the most common tag types
+      break;
+    }
     case 'input': {
       ReactDOMInputInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
@@ -1037,30 +1048,32 @@ export function setInitialProperties(
       }
       return;
     }
+    default: {
+      if (isCustomElement(tag, props)) {
+        for (const propKey in props) {
+          if (!props.hasOwnProperty(propKey)) {
+            continue;
+          }
+          const propValue = props[propKey];
+          if (propValue == null) {
+            continue;
+          }
+          setPropOnCustomElement(domElement, tag, propKey, propValue, props);
+        }
+        return;
+      }
+    }
   }
 
-  if (isCustomElement(tag, props)) {
-    for (const propKey in props) {
-      if (!props.hasOwnProperty(propKey)) {
-        continue;
-      }
-      const propValue = props[propKey];
-      if (propValue == null) {
-        continue;
-      }
-      setPropOnCustomElement(domElement, tag, propKey, propValue, props);
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
     }
-  } else {
-    for (const propKey in props) {
-      if (!props.hasOwnProperty(propKey)) {
-        continue;
-      }
-      const propValue = props[propKey];
-      if (propValue == null) {
-        continue;
-      }
-      setProp(domElement, tag, propKey, propValue, props);
+    const propValue = props[propKey];
+    if (propValue == null) {
+      continue;
     }
+    setProp(domElement, tag, propKey, propValue, props);
   }
 }
 
@@ -1186,6 +1199,17 @@ export function updateProperties(
   nextProps: Object,
 ): void {
   switch (tag) {
+    case 'div':
+    case 'span':
+    case 'svg':
+    case 'path':
+    case 'a':
+    case 'g':
+    case 'p':
+    case 'li': {
+      // Fast track the most common tag types
+      break;
+    }
     case 'input': {
       // Update checked *before* name.
       // In the middle of an update, it is possible to have multiple checked.
@@ -1343,21 +1367,29 @@ export function updateProperties(
       }
       return;
     }
+    default: {
+      if (isCustomElement(tag, nextProps)) {
+        for (let i = 0; i < updatePayload.length; i += 2) {
+          const propKey = updatePayload[i];
+          const propValue = updatePayload[i + 1];
+          setPropOnCustomElement(
+            domElement,
+            tag,
+            propKey,
+            propValue,
+            nextProps,
+          );
+        }
+        return;
+      }
+    }
   }
 
   // Apply the diff.
-  if (isCustomElement(tag, nextProps)) {
-    for (let i = 0; i < updatePayload.length; i += 2) {
-      const propKey = updatePayload[i];
-      const propValue = updatePayload[i + 1];
-      setPropOnCustomElement(domElement, tag, propKey, propValue, nextProps);
-    }
-  } else {
-    for (let i = 0; i < updatePayload.length; i += 2) {
-      const propKey = updatePayload[i];
-      const propValue = updatePayload[i + 1];
-      setProp(domElement, tag, propKey, propValue, nextProps);
-    }
+  for (let i = 0; i < updatePayload.length; i += 2) {
+    const propKey = updatePayload[i];
+    const propValue = updatePayload[i + 1];
+    setProp(domElement, tag, propKey, propValue, nextProps);
   }
 }
 

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -2638,6 +2638,16 @@ export function pushStartInstance(
   }
 
   switch (type) {
+    case 'div':
+    case 'span':
+    case 'svg':
+    case 'path':
+    case 'a':
+    case 'g':
+    case 'p':
+    case 'li':
+      // Fast track very common tags
+      break;
     // Special tags
     case 'select':
       return pushStartSelect(target, props);
@@ -2747,15 +2757,14 @@ export function pushStartInstance(
       );
     }
     default: {
-      if (type.indexOf('-') === -1) {
-        // Generic element
-        return pushStartGenericElement(target, props, type);
-      } else {
+      if (type.indexOf('-') !== -1) {
         // Custom element
         return pushStartCustomElement(target, props, type);
       }
     }
   }
+  // Generic element
+  return pushStartGenericElement(target, props, type);
 }
 
 const endTag1 = stringToPrecomputedChunk('</');