[Autocomplete] use useMemo to render grouped options

mui · Oct 29, 2020 · 81aaa6f · 81aaa6f
1 parent 44c4606
commit 81aaa6f
Showing 1 changed file with 19 additions and 12 deletions.
diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -404,6 +404,24 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     );
   };
 
+  const renderGroupedOptions = React.useMemo(
+    () => (groupedOptions) => {
+      return groupedOptions.map((option, index) => {
+        if (groupBy) {
+          return renderGroup({
+            key: option.key,
+            group: option.group,
+            children: option.options.map((option2, index2) =>
+              renderListOption(option2, option.index + index2),
+            ),
+          });
+        }
+        return renderListOption(option, index);
+      });
+    },
+    [groupedOptions],
+  );
+
   const hasClearIcon = !disableClearable && !disabled && dirty;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
@@ -496,18 +514,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                 {...getListboxProps()}
                 {...ListboxProps}
               >
-                {groupedOptions.map((option, index) => {
-                  if (groupBy) {
-                    return renderGroup({
-                      key: option.key,
-                      group: option.group,
-                      children: option.options.map((option2, index2) =>
-                        renderListOption(option2, option.index + index2),
-                      ),
-                    });
-                  }
-                  return renderListOption(option, index);
-                })}
+                {renderGroupedOptions(groupedOptions)}
               </ListboxComponent>
             ) : null}
           </PaperComponent>