[utils] Add small optimization: composeClasses

packages/mui-utils/src/composeClasses/composeClasses.test.ts

@@ -13,8 +13,8 @@ describe('composeClasses', () => {
         undefined,
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root MuiTest-standard',
-      slot: 'MuiTest-slot',
+      root: 'MuiTest-root MuiTest-standard ',
+      slot: 'MuiTest-slot ',
     });
   });
 
@@ -32,8 +32,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root MuiTest-standard standardOverride',
-      slot: 'MuiTest-slot slotOverride',
+      root: 'MuiTest-root MuiTest-standard standardOverride ',
+      slot: 'MuiTest-slot slotOverride ',
     });
   });
 
@@ -51,8 +51,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root MuiTest-standard standardOverride',
-      slot: 'MuiTest-slot slotOverride',
+      root: 'MuiTest-root MuiTest-standard standardOverride ',
+      slot: 'MuiTest-slot slotOverride ',
     });
   });
 });

packages/mui-utils/src/composeClasses/composeClasses.ts

@@ -1,30 +1,69 @@
+/* eslint no-restricted-syntax: 0, prefer-template: 0, no-unreachable-loop: 0
+   ---
+   These rules are preventing the performance optimizations below.
+ */
+
 export default function composeClasses<ClassKey extends string>(
   slots: Record<ClassKey, ReadonlyArray<string | false | undefined | null>>,
   getUtilityClass: (slot: string) => string,
   classes: Record<string, string> | undefined = undefined,
 ): Record<ClassKey, string> {
-  const output: Record<ClassKey, string> = {} as any;
+  const output = {} as Record<ClassKey, string>;
+
+  /* This is split in 2 loops for performance reasons, as it allows to avoid the `if (classes)`
+   * check in both of those cases. If `classes` is either `{}` or `undefined`, we consider it empty. */
+  if (isEmpty(classes)) {
+    for (const slotName in slots) {
+      if (Object.prototype.hasOwnProperty.call(slots, slotName)) {
+        const slotNames = slots[slotName];
 
-  Object.keys(slots).forEach(
-    // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-    (slot: ClassKey) => {
-      output[slot] = slots[slot]
-        .reduce((acc, key) => {
-          if (key) {
-            const utilityClass = getUtilityClass(key);
-            if (utilityClass !== '') {
-              acc.push(utilityClass);
+        let result = '';
+        for (let i = 0; i < slotNames.length; i += 1) {
+          const slotPart = slotNames[i];
+          if (slotPart) {
+            const utilityClass = getUtilityClass(slotPart);
+            if (utilityClass) {
+              result += utilityClass + ' ';
             }
-            if (classes && classes[key]) {
-              acc.push(classes[key]);
+          }
+        }
+        output[slotName] = result;
+      }
+    }
+  } else {
+    for (const slotName in slots) {
+      if (Object.prototype.hasOwnProperty.call(slots, slotName)) {
+        const slotNames = slots[slotName];
+
+        let result = '';
+        for (let i = 0; i < slotNames.length; i += 1) {
+          const slotPart = slotNames[i];
+          if (slotPart) {
+            const utilityClass = getUtilityClass(slotPart);
+            if (utilityClass) {
+              result += utilityClass + ' ';
+            }
+            if (classes[slotPart]) {
+              result += classes[slotPart] + ' ';
             }
           }
-          return acc;
-        }, [] as string[])
-        .join(' ');
-    },
-  );
+        }
+        output[slotName] = result;
+      }
+    }
+  }
 
   return output;
 }
+
+function isEmpty(value: object | undefined): value is undefined {
+  if (!value) {
+    return true;
+  }
+  for (const key in value) {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      return false;
+    }
+  }
+  return true;
+}