From 4f73f1aaa18d3cb5d58e416df6a36ac519f465f7 Mon Sep 17 00:00:00 2001
From: Minjee Son <104430030+iammminzzy@users.noreply.github.com>
Date: Tue, 23 Apr 2024 18:18:08 +0100
Subject: [PATCH] [docs] Memoize array sorting

---
 .../components/table/TableSortAndSelection.js |  97 ++++-----
 .../table/TableSortAndSelection.tsx           |  97 ++++-----
 .../order-dashboard/components/OrderTable.tsx |   8 +-
 docs/src/components/showcase/FolderTable.tsx  |   8 +-
 .../modules/components/MaterialShowcase.js    | 186 +++++++++---------
 5 files changed, 210 insertions(+), 186 deletions(-)

diff --git a/docs/data/joy/components/table/TableSortAndSelection.js b/docs/data/joy/components/table/TableSortAndSelection.js
index c7649aa9609b6d..cbfffb636abae7 100644
--- a/docs/data/joy/components/table/TableSortAndSelection.js
+++ b/docs/data/joy/components/table/TableSortAndSelection.js
@@ -242,6 +242,14 @@ export default function TableSortAndSelection() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
+  const visibleRows = React.useMemo(
+    () =>
+      [...rows]
+        .sort(getComparator(order, orderBy))
+        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [order, orderBy, page, rowsPerPage],
+  );
+
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -332,53 +340,50 @@ export default function TableSortAndSelection() {
           rowCount={rows.length}
         />
         <tbody>
-          {[...rows]
-            .sort(getComparator(order, orderBy))
-            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            .map((row, index) => {
-              const isItemSelected = isSelected(row.name);
-              const labelId = `enhanced-table-checkbox-${index}`;
+          {visibleRows.map((row, index) => {
+            const isItemSelected = isSelected(row.name);
+            const labelId = `enhanced-table-checkbox-${index}`;
 
-              return (
-                <tr
-                  onClick={(event) => handleClick(event, row.name)}
-                  role="checkbox"
-                  aria-checked={isItemSelected}
-                  tabIndex={-1}
-                  key={row.name}
-                  // selected={isItemSelected}
-                  style={
-                    isItemSelected
-                      ? {
-                          '--TableCell-dataBackground':
-                            'var(--TableCell-selectedBackground)',
-                          '--TableCell-headBackground':
-                            'var(--TableCell-selectedBackground)',
-                        }
-                      : {}
-                  }
-                >
-                  <th scope="row">
-                    <Checkbox
-                      checked={isItemSelected}
-                      slotProps={{
-                        input: {
-                          'aria-labelledby': labelId,
-                        },
-                      }}
-                      sx={{ verticalAlign: 'top' }}
-                    />
-                  </th>
-                  <th id={labelId} scope="row">
-                    {row.name}
-                  </th>
-                  <td>{row.calories}</td>
-                  <td>{row.fat}</td>
-                  <td>{row.carbs}</td>
-                  <td>{row.protein}</td>
-                </tr>
-              );
-            })}
+            return (
+              <tr
+                onClick={(event) => handleClick(event, row.name)}
+                role="checkbox"
+                aria-checked={isItemSelected}
+                tabIndex={-1}
+                key={row.name}
+                // selected={isItemSelected}
+                style={
+                  isItemSelected
+                    ? {
+                        '--TableCell-dataBackground':
+                          'var(--TableCell-selectedBackground)',
+                        '--TableCell-headBackground':
+                          'var(--TableCell-selectedBackground)',
+                      }
+                    : {}
+                }
+              >
+                <th scope="row">
+                  <Checkbox
+                    checked={isItemSelected}
+                    slotProps={{
+                      input: {
+                        'aria-labelledby': labelId,
+                      },
+                    }}
+                    sx={{ verticalAlign: 'top' }}
+                  />
+                </th>
+                <th id={labelId} scope="row">
+                  {row.name}
+                </th>
+                <td>{row.calories}</td>
+                <td>{row.fat}</td>
+                <td>{row.carbs}</td>
+                <td>{row.protein}</td>
+              </tr>
+            );
+          })}
           {emptyRows > 0 && (
             <tr
               style={{
diff --git a/docs/data/joy/components/table/TableSortAndSelection.tsx b/docs/data/joy/components/table/TableSortAndSelection.tsx
index 06026b6cfa0758..2109d11b6774d8 100644
--- a/docs/data/joy/components/table/TableSortAndSelection.tsx
+++ b/docs/data/joy/components/table/TableSortAndSelection.tsx
@@ -281,6 +281,14 @@ export default function TableSortAndSelection() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
+  const visibleRows = React.useMemo(
+    () =>
+      [...rows]
+        .sort(getComparator(order, orderBy))
+        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [order, orderBy, page, rowsPerPage],
+  );
+
   const handleRequestSort = (
     event: React.MouseEvent<unknown>,
     property: keyof Data,
@@ -374,53 +382,50 @@ export default function TableSortAndSelection() {
           rowCount={rows.length}
         />
         <tbody>
-          {[...rows]
-            .sort(getComparator(order, orderBy))
-            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            .map((row, index) => {
-              const isItemSelected = isSelected(row.name);
-              const labelId = `enhanced-table-checkbox-${index}`;
+          {visibleRows.map((row, index) => {
+            const isItemSelected = isSelected(row.name);
+            const labelId = `enhanced-table-checkbox-${index}`;
 
-              return (
-                <tr
-                  onClick={(event) => handleClick(event, row.name)}
-                  role="checkbox"
-                  aria-checked={isItemSelected}
-                  tabIndex={-1}
-                  key={row.name}
-                  // selected={isItemSelected}
-                  style={
-                    isItemSelected
-                      ? ({
-                          '--TableCell-dataBackground':
-                            'var(--TableCell-selectedBackground)',
-                          '--TableCell-headBackground':
-                            'var(--TableCell-selectedBackground)',
-                        } as React.CSSProperties)
-                      : {}
-                  }
-                >
-                  <th scope="row">
-                    <Checkbox
-                      checked={isItemSelected}
-                      slotProps={{
-                        input: {
-                          'aria-labelledby': labelId,
-                        },
-                      }}
-                      sx={{ verticalAlign: 'top' }}
-                    />
-                  </th>
-                  <th id={labelId} scope="row">
-                    {row.name}
-                  </th>
-                  <td>{row.calories}</td>
-                  <td>{row.fat}</td>
-                  <td>{row.carbs}</td>
-                  <td>{row.protein}</td>
-                </tr>
-              );
-            })}
+            return (
+              <tr
+                onClick={(event) => handleClick(event, row.name)}
+                role="checkbox"
+                aria-checked={isItemSelected}
+                tabIndex={-1}
+                key={row.name}
+                // selected={isItemSelected}
+                style={
+                  isItemSelected
+                    ? ({
+                        '--TableCell-dataBackground':
+                          'var(--TableCell-selectedBackground)',
+                        '--TableCell-headBackground':
+                          'var(--TableCell-selectedBackground)',
+                      } as React.CSSProperties)
+                    : {}
+                }
+              >
+                <th scope="row">
+                  <Checkbox
+                    checked={isItemSelected}
+                    slotProps={{
+                      input: {
+                        'aria-labelledby': labelId,
+                      },
+                    }}
+                    sx={{ verticalAlign: 'top' }}
+                  />
+                </th>
+                <th id={labelId} scope="row">
+                  {row.name}
+                </th>
+                <td>{row.calories}</td>
+                <td>{row.fat}</td>
+                <td>{row.carbs}</td>
+                <td>{row.protein}</td>
+              </tr>
+            );
+          })}
           {emptyRows > 0 && (
             <tr
               style={
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx
index 06c900a8d05ae1..2df7c3eba85057 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx
@@ -266,6 +266,12 @@ export default function OrderTable() {
   const [order, setOrder] = React.useState<Order>('desc');
   const [selected, setSelected] = React.useState<readonly string[]>([]);
   const [open, setOpen] = React.useState(false);
+
+  const sortedRows = React.useMemo(
+    () => [...rows].sort(getComparator(order, 'id')),
+    [order],
+  );
+
   const renderFilters = () => (
     <React.Fragment>
       <FormControl size="sm">
@@ -435,7 +441,7 @@ export default function OrderTable() {
             </tr>
           </thead>
           <tbody>
-            {[...rows].sort(getComparator(order, 'id')).map((row) => (
+            {sortedRows.map((row) => (
               <tr key={row.id}>
                 <td style={{ textAlign: 'center', width: 120 }}>
                   <Checkbox
diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
index 05de2315028999..3bbbd690e5de04 100644
--- a/docs/src/components/showcase/FolderTable.tsx
+++ b/docs/src/components/showcase/FolderTable.tsx
@@ -56,6 +56,12 @@ function formatSize(size: number) {
 export default function BasicTable() {
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof Data>('name');
+
+  const sortedRows = React.useMemo(
+    () => [...data].sort(getComparator(order, orderBy)),
+    [order, orderBy],
+  );
+
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Data) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -122,7 +128,7 @@ export default function BasicTable() {
           </TableRow>
         </TableHead>
         <TableBody>
-          {[...data].sort(getComparator(order, orderBy)).map((row) => (
+          {sortedRows.map((row) => (
             <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
               <TableCell component="th" scope="row">
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js
index df36890c140347..acbf5385b9940a 100644
--- a/docs/src/modules/components/MaterialShowcase.js
+++ b/docs/src/modules/components/MaterialShowcase.js
@@ -462,6 +462,11 @@ export default function Showcase() {
   const sortFunction = sortFunctions[sortFunctionName];
   const t = useTranslate();
 
+  const sortedApps = React.useMemo(
+    () => appList.filter((item) => item[sortFunctionName] !== undefined).sort(sortFunction),
+    [sortFunction, sortFunctionName],
+  );
+
   const handleChangeSort = (event) => {
     setSortFunctionName(event.target.value);
   };
@@ -486,100 +491,97 @@ export default function Showcase() {
         </ToggleButtonGroup>
       </Box>
       <Grid container spacing={3}>
-        {appList
-          .filter((item) => item[sortFunctionName] !== undefined)
-          .sort(sortFunction)
-          .map((app) => (
-            <Grid key={app.title} item xs={12} sm={6}>
-              {app.image ? (
-                <Card
-                  variant="outlined"
-                  sx={(theme) => ({
-                    height: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    p: 2,
-                    gap: 2,
-                    borderRadius: 1,
-                    backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
+        {sortedApps.map((app) => (
+          <Grid key={app.title} item xs={12} sm={6}>
+            {app.image ? (
+              <Card
+                variant="outlined"
+                sx={(theme) => ({
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  p: 2,
+                  gap: 2,
+                  borderRadius: 1,
+                  backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
+                  borderColor: 'divider',
+                  ...theme.applyDarkStyles({
+                    backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
                     borderColor: 'divider',
-                    ...theme.applyDarkStyles({
-                      backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
+                  }),
+                })}
+              >
+                <a href={app.link} rel="noopener nofollow" target="_blank">
+                  <CardMedia
+                    component="img"
+                    loading="lazy"
+                    width="600"
+                    height="450"
+                    src={`/static/images/showcase/${app.image}`}
+                    title={app.title}
+                    sx={(theme) => ({
+                      height: 'auto',
+                      borderRadius: '6px',
+                      bgcolor: 'currentColor',
+                      border: '1px solid',
                       borderColor: 'divider',
-                    }),
-                  })}
-                >
-                  <a href={app.link} rel="noopener nofollow" target="_blank">
-                    <CardMedia
-                      component="img"
-                      loading="lazy"
-                      width="600"
-                      height="450"
-                      src={`/static/images/showcase/${app.image}`}
-                      title={app.title}
-                      sx={(theme) => ({
-                        height: 'auto',
-                        borderRadius: '6px',
-                        bgcolor: 'currentColor',
-                        border: '1px solid',
-                        borderColor: 'divider',
-                        color: 'grey.100',
-                        ...theme.applyDarkStyles({
-                          color: 'primaryDark.900',
-                        }),
-                      })}
-                    />
-                  </a>
-                  <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-                    <Typography
-                      component="h2"
-                      variant="body1"
-                      fontWeight="semiBold"
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      <span>{app.title}</span>
-                      {app.source ? (
-                        <IconButton
-                          href={app.source}
-                          target="_blank"
-                          aria-label={`${app.title} ${t('sourceCode')}`}
-                        >
-                          <GitHubIcon fontSize="small" />
-                        </IconButton>
-                      ) : null}
-                    </Typography>
-                    <Typography variant="body2" color="text.secondary" flexGrow={1}>
-                      {app.description}
-                    </Typography>
-                    <Typography
-                      variant="caption"
-                      fontWeight="semiBold"
-                      color="text.secondary"
-                      mt={1}
-                      sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
-                    >
-                      <CalendarMonthRoundedIcon sx={{ fontSize: 17, opacity: 0.8 }} />
-                      {app.dateAdded}
-                    </Typography>
-                  </Box>
-                </Card>
-              ) : (
-                <Link
-                  variant="body2"
-                  target="_blank"
-                  rel="noopener nofollow"
-                  href={app.link}
-                  gutterBottom
-                >
-                  {t('visit')}
-                </Link>
-              )}
-            </Grid>
-          ))}
+                      color: 'grey.100',
+                      ...theme.applyDarkStyles({
+                        color: 'primaryDark.900',
+                      }),
+                    })}
+                  />
+                </a>
+                <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                  <Typography
+                    component="h2"
+                    variant="body1"
+                    fontWeight="semiBold"
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <span>{app.title}</span>
+                    {app.source ? (
+                      <IconButton
+                        href={app.source}
+                        target="_blank"
+                        aria-label={`${app.title} ${t('sourceCode')}`}
+                      >
+                        <GitHubIcon fontSize="small" />
+                      </IconButton>
+                    ) : null}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" flexGrow={1}>
+                    {app.description}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    fontWeight="semiBold"
+                    color="text.secondary"
+                    mt={1}
+                    sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
+                  >
+                    <CalendarMonthRoundedIcon sx={{ fontSize: 17, opacity: 0.8 }} />
+                    {app.dateAdded}
+                  </Typography>
+                </Box>
+              </Card>
+            ) : (
+              <Link
+                variant="body2"
+                target="_blank"
+                rel="noopener nofollow"
+                href={app.link}
+                gutterBottom
+              >
+                {t('visit')}
+              </Link>
+            )}
+          </Grid>
+        ))}
       </Grid>
     </React.Fragment>
   );