Memoize callbacks and define exhaustive deps for hooks.

elastic · Sep 8, 2021 · 7ccb6ab · 7ccb6ab
1 parent 9be3802
commit 7ccb6ab
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/...ins/upgrade_assistant/public/application/components/overview/backup_step/cloud_backup.tsx b/...ins/upgrade_assistant/public/application/components/overview/backup_step/cloud_backup.tsx
@@ -50,9 +50,7 @@ export const CloudBackup: React.FunctionComponent<Props> = ({
       // An error should invalidate the previous state.
       setIsComplete((!error && data?.isBackedUp) ?? false);
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [error, isLoading, data]);
+  }, [setIsComplete, error, isLoading, data]);
 
   if (isInitialRequest && isLoading) {
     return <EuiLoadingContent data-test-subj="cloudBackupLoading" lines={3} />;

diff --git a/...rade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx b/...rade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx
@@ -33,8 +33,7 @@ const FixIssuesStep: FunctionComponent<OverviewStepProps> = ({ setIsComplete })
 
   useEffect(() => {
     setIsComplete(isEsFixed && isKibanaFixed);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEsFixed, isKibanaFixed]);
+  }, [setIsComplete, isEsFixed, isKibanaFixed]);
 
   return (
     <EuiFlexGroup>

diff --git a/...ts/overview/fix_logs_step/deprecations_count_checkpoint/deprecations_count_checkpoint.tsx b/...ts/overview/fix_logs_step/deprecations_count_checkpoint/deprecations_count_checkpoint.tsx
@@ -98,9 +98,7 @@ export const DeprecationsCountCheckpoint: FunctionComponent<Props> = ({
       // An error should invalidate the previous state.
       setHasNoDeprecationLogs(!error && !hasLogs);
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [error, isLoading, hasLogs]);
+  }, [setHasNoDeprecationLogs, error, isLoading, hasLogs]);
 
   if (isInitialRequest && isLoading) {
     return <EuiLoadingContent lines={6} />;

diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useEffect, useState, useCallback } from 'react';
 
 import {
   EuiSteps,
@@ -60,12 +60,14 @@ export const Overview: FunctionComponent = () => {
   });
 
   const isStepComplete = (step: OverviewStep) => completedStepsMap[step];
-  const setCompletedStep = (step: OverviewStep, isCompleted: boolean) => {
-    setCompletedStepsMap({
-      ...completedStepsMap,
-      [step]: isCompleted,
-    });
-  };
+  const setCompletedStep = useCallback(() => {
+    return (step: OverviewStep, isCompleted: boolean) => {
+      setCompletedStepsMap({
+        ...completedStepsMap,
+        [step]: isCompleted,
+      });
+    };
+  }, [completedStepsMap]);
 
   return (
     <EuiPageBody restrictWidth={true} data-test-subj="overview">
@@ -110,16 +112,22 @@ export const Overview: FunctionComponent = () => {
             getBackupStep({
               cloud,
               isComplete: isStepComplete('backup'),
-              setIsComplete: setCompletedStep.bind(null, 'backup'),
+              setIsComplete: useCallback(() => setCompletedStep.bind(null, 'backup'), [
+                setCompletedStep,
+              ]),
             }),
             getFixIssuesStep({
               nextMajor,
               isComplete: isStepComplete('fix_issues'),
-              setIsComplete: setCompletedStep.bind(null, 'fix_issues'),
+              setIsComplete: useCallback(() => setCompletedStep.bind(null, 'fix_issues'), [
+                setCompletedStep,
+              ]),
             }),
             getFixLogsStep({
               isComplete: isStepComplete('fix_logs'),
-              setIsComplete: setCompletedStep.bind(null, 'fix_logs'),
+              setIsComplete: useCallback(() => setCompletedStep.bind(null, 'fix_logs'), [
+                setCompletedStep,
+              ]),
             }),
             getUpgradeStep({ docLinks, nextMajor }),
           ]}