refactor: memoize heavy components in project overview (#5241)

This PR memoizes some of the heavier components in our project overview
table

frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx

@@ -20,3 +20,7 @@ export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
         />
     );
 };
+
+export const MemoizedFeatureEnvironmentSeenCell = React.memo(
+    FeatureEnvironmentSeenCell,
+);

frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/createFeatureToggleCell.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { styled } from '@mui/material';
 import { flexRow } from 'themes/themeStyles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -22,21 +22,25 @@ const StyledSwitchContainer = styled('div', {
     }),
 }));
 
-export const createFeatureToggleCell =
+interface IFeatureToggleCellProps {
-    (
+    projectId: string;
-        projectId: string,
+    environmentName: string;
-        environmentName: string,
+    isChangeRequestEnabled: boolean;
-        isChangeRequestEnabled: boolean,
+    refetch: () => void;
-        refetch: () => void,
+    onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'];
-        onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'],
-    ) =>
-    ({
-        value,
-        row: { original: feature },
-    }: {
     value: boolean;
-        row: { original: ListItemType };
+    feature: ListItemType;
-    }) => {
+}
+
+const FeatureToggleCellComponent = ({
+    value,
+    feature,
+    projectId,
+    environmentName,
+    isChangeRequestEnabled,
+    refetch,
+    onFeatureToggleSwitch,
+}: IFeatureToggleCellProps) => {
     const environment = feature.environments[environmentName];
 
     const hasWarning = useMemo(
@@ -77,3 +81,33 @@ export const createFeatureToggleCell =
         </StyledSwitchContainer>
     );
 };
+
+const MemoizedFeatureToggleCell = React.memo(FeatureToggleCellComponent);
+
+export const createFeatureToggleCell =
+    (
+        projectId: string,
+        environmentName: string,
+        isChangeRequestEnabled: boolean,
+        refetch: () => void,
+        onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'],
+    ) =>
+    ({
+        value,
+        row: { original: feature },
+    }: {
+        value: boolean;
+        row: { original: ListItemType };
+    }) => {
+        return (
+            <MemoizedFeatureToggleCell
+                value={value}
+                feature={feature}
+                projectId={projectId}
+                environmentName={environmentName}
+                isChangeRequestEnabled={isChangeRequestEnabled}
+                refetch={refetch}
+                onFeatureToggleSwitch={onFeatureToggleSwitch}
+            />
+        );
+    };

frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx

@@ -159,6 +159,7 @@ export const useFeatureToggleSwitch: UseFeatureToggleSwitchType = (
                         config.environmentName,
                         shouldActivateDisabledStrategies,
                     );
+
                     setToastData({
                         type: 'success',
                         title: `Enabled in ${config.environmentName}`,

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     Checkbox,
     IconButton,
@@ -55,10 +55,10 @@ import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
 import FileDownload from '@mui/icons-material/FileDownload';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
-import { RowSelectCell } from './RowSelectCell/RowSelectCell';
+import { MemoizedRowSelectCell } from './RowSelectCell/RowSelectCell';
 import { BatchSelectionActionsBar } from '../../../common/BatchSelectionActionsBar/BatchSelectionActionsBar';
 import { ProjectFeaturesBatchActions } from './ProjectFeaturesBatchActions/ProjectFeaturesBatchActions';
-import { FeatureEnvironmentSeenCell } from '../../../common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
+import { MemoizedFeatureEnvironmentSeenCell } from '../../../common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { ListItemType } from './ProjectFeatureToggles.types';
 import { createFeatureToggleCell } from './FeatureToggleSwitch/createFeatureToggleCell';
@@ -161,7 +161,9 @@ export const ProjectFeatureToggles = ({
                     <Checkbox {...getToggleAllRowsSelectedProps()} />
                 ),
                 Cell: ({ row }: any) => (
-                    <RowSelectCell {...row?.getToggleRowSelectedProps?.()} />
+                    <MemoizedRowSelectCell
+                        {...row?.getToggleRowSelectedProps?.()}
+                    />
                 ),
                 maxWidth: 50,
                 disableSortBy: true,
@@ -191,7 +193,7 @@ export const ProjectFeatureToggles = ({
                 accessor: 'lastSeenAt',
                 Cell: ({ value, row: { original: feature } }: any) => {
                     return showEnvironmentLastSeen ? (
-                        <FeatureEnvironmentSeenCell feature={feature} />
+                        <MemoizedFeatureEnvironmentSeenCell feature={feature} />
                     ) : (
                         <FeatureSeenCell value={value} />
                     );

frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Box, Checkbox, styled } from '@mui/material';
 import { FC } from 'react';
 import { BATCH_SELECT } from 'utils/testIds';
@@ -23,3 +24,5 @@ export const RowSelectCell: FC<IRowSelectCellProps> = ({
         <Checkbox onChange={onChange} title={title} checked={checked} />
     </StyledBoxCell>
 );
+
+export const MemoizedRowSelectCell = React.memo(RowSelectCell);