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

This PR memoizes some of the heavier components in our project overview table
Unleash · Nov 2, 2023 · 9cfade9 · 9cfade9
1 parent 5b41abf
commit 9cfade9
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 43 deletions.
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
@@ -20,3 +20,7 @@ export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
         />
     );
 };
+
+export const MemoizedFeatureEnvironmentSeenCell = React.memo(
+    FeatureEnvironmentSeenCell,
+);
diff --git a/...ent/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/createFeatureToggleCell.tsx b/...ent/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,6 +22,68 @@ const StyledSwitchContainer = styled('div', {
     }),
 }));
 
+interface IFeatureToggleCellProps {
+    projectId: string;
+    environmentName: string;
+    isChangeRequestEnabled: boolean;
+    refetch: () => void;
+    onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'];
+    value: boolean;
+    feature: ListItemType;
+}
+
+const FeatureToggleCellComponent = ({
+    value,
+    feature,
+    projectId,
+    environmentName,
+    isChangeRequestEnabled,
+    refetch,
+    onFeatureToggleSwitch,
+}: IFeatureToggleCellProps) => {
+    const environment = feature.environments[environmentName];
+
+    const hasWarning = useMemo(
+        () =>
+            feature.someEnabledEnvironmentHasVariants &&
+            environment.variantCount === 0 &&
+            environment.enabled,
+        [feature, environment],
+    );
+
+    const onToggle = (newState: boolean, onRollback: () => void) => {
+        onFeatureToggleSwitch(newState, {
+            projectId,
+            featureId: feature.name,
+            environmentName,
+            environmentType: environment?.type,
+            hasStrategies: environment?.hasStrategies,
+            hasEnabledStrategies: environment?.hasEnabledStrategies,
+            isChangeRequestEnabled,
+            onRollback,
+            onSuccess: refetch,
+        });
+    };
+
+    return (
+        <StyledSwitchContainer hasWarning={hasWarning}>
+            <FeatureToggleSwitch
+                projectId={projectId}
+                value={value}
+                featureId={feature.name}
+                environmentName={environmentName}
+                onToggle={onToggle}
+            />
+            <ConditionallyRender
+                condition={hasWarning}
+                show={<VariantsWarningTooltip />}
+            />
+        </StyledSwitchContainer>
+    );
+};
+
+const MemoizedFeatureToggleCell = React.memo(FeatureToggleCellComponent);
+
 export const createFeatureToggleCell =
     (
         projectId: string,
@@ -37,43 +99,15 @@ export const createFeatureToggleCell =
         value: boolean;
         row: { original: ListItemType };
     }) => {
-        const environment = feature.environments[environmentName];
-
-        const hasWarning = useMemo(
-            () =>
-                feature.someEnabledEnvironmentHasVariants &&
-                environment.variantCount === 0 &&
-                environment.enabled,
-            [feature, environment],
-        );
-
-        const onToggle = (newState: boolean, onRollback: () => void) => {
-            onFeatureToggleSwitch(newState, {
-                projectId,
-                featureId: feature.name,
-                environmentName,
-                environmentType: environment?.type,
-                hasStrategies: environment?.hasStrategies,
-                hasEnabledStrategies: environment?.hasEnabledStrategies,
-                isChangeRequestEnabled,
-                onRollback,
-                onSuccess: refetch,
-            });
-        };
-
         return (
-            <StyledSwitchContainer hasWarning={hasWarning}>
-                <FeatureToggleSwitch
-                    projectId={projectId}
-                    value={value}
-                    featureId={feature.name}
-                    environmentName={environmentName}
-                    onToggle={onToggle}
-                />
-                <ConditionallyRender
-                    condition={hasWarning}
-                    show={<VariantsWarningTooltip />}
-                />
-            </StyledSwitchContainer>
+            <MemoizedFeatureToggleCell
+                value={value}
+                feature={feature}
+                projectId={projectId}
+                environmentName={environmentName}
+                isChangeRequestEnabled={isChangeRequestEnabled}
+                refetch={refetch}
+                onFeatureToggleSwitch={onFeatureToggleSwitch}
+            />
         );
     };
diff --git a/...nent/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx b/...nent/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}`,

diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/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} />
                     );

diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx b/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);
-Original file line number
+Diff line change
@@ Expand Up @@
             />
         );
     };
+    export const MemoizedFeatureEnvironmentSeenCell = React.memo(
+        FeatureEnvironmentSeenCell,
+    );