[docs][material-ui][Autocomplete] Refactor asynchronous loading demo (#…

…43630)
mui · Sep 7, 2024 · fc65397 · fc65397
1 parent a25b030
commit fc65397
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 54 deletions.
diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js
@@ -14,44 +14,30 @@ function sleep(duration) {
 export default function Asynchronous() {
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
-  const loading = open && options.length === 0;
-
-  React.useEffect(() => {
-    let active = true;
-
-    if (!loading) {
-      return undefined;
-    }
+  const [loading, setLoading] = React.useState(false);
 
+  const handleOpen = () => {
+    setOpen(true);
     (async () => {
+      setLoading(true);
       await sleep(1e3); // For demo purposes.
+      setLoading(false);
 
-      if (active) {
-        setOptions([...topFilms]);
-      }
+      setOptions([...topFilms]);
     })();
+  };
 
-    return () => {
-      active = false;
-    };
-  }, [loading]);
-
-  React.useEffect(() => {
-    if (!open) {
-      setOptions([]);
-    }
-  }, [open]);
+  const handleClose = () => {
+    setOpen(false);
+    setOptions([]);
+  };
 
   return (
     <Autocomplete
       sx={{ width: 300 }}
       open={open}
-      onOpen={() => {
-        setOpen(true);
-      }}
-      onClose={() => {
-        setOpen(false);
-      }}
+      onOpen={handleOpen}
+      onClose={handleClose}
       isOptionEqualToValue={(option, value) => option.title === value.title}
       getOptionLabel={(option) => option.title}
       options={options}

diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx
@@ -19,44 +19,30 @@ function sleep(duration: number): Promise<void> {
 export default function Asynchronous() {
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState<readonly Film[]>([]);
-  const loading = open && options.length === 0;
-
-  React.useEffect(() => {
-    let active = true;
-
-    if (!loading) {
-      return undefined;
-    }
+  const [loading, setLoading] = React.useState(false);
 
+  const handleOpen = () => {
+    setOpen(true);
     (async () => {
+      setLoading(true);
       await sleep(1e3); // For demo purposes.
+      setLoading(false);
 
-      if (active) {
-        setOptions([...topFilms]);
-      }
+      setOptions([...topFilms]);
     })();
+  };
 
-    return () => {
-      active = false;
-    };
-  }, [loading]);
-
-  React.useEffect(() => {
-    if (!open) {
-      setOptions([]);
-    }
-  }, [open]);
+  const handleClose = () => {
+    setOpen(false);
+    setOptions([]);
+  };
 
   return (
     <Autocomplete
       sx={{ width: 300 }}
       open={open}
-      onOpen={() => {
-        setOpen(true);
-      }}
-      onClose={() => {
-        setOpen(false);
-      }}
+      onOpen={handleOpen}
+      onClose={handleClose}
       isOptionEqualToValue={(option, value) => option.title === value.title}
       getOptionLabel={(option) => option.title}
       options={options}