From 8b3d45cc199ff8fa19f7c347e82d5a53c7cd03d2 Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Tue, 19 Dec 2023 17:11:32 +0100
Subject: [PATCH] refactor(progress-tracker): improves steps rerenderings

---
 .../src/ProgressTrackerStep.tsx               | 52 +++++++++----------
 .../src/ProgressTrackerStepIndicator.tsx      | 21 +++-----
 2 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/packages/components/progress-tracker/src/ProgressTrackerStep.tsx b/packages/components/progress-tracker/src/ProgressTrackerStep.tsx
index 4dd5f409bf..514ae7c7da 100644
--- a/packages/components/progress-tracker/src/ProgressTrackerStep.tsx
+++ b/packages/components/progress-tracker/src/ProgressTrackerStep.tsx
@@ -1,18 +1,6 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useEffect,
-  useId,
-  useMemo,
-  useState,
-} from 'react'
+import { type ComponentPropsWithoutRef, forwardRef, type ReactNode, useEffect, useId } from 'react'
 
-import {
-  ProgressTrackerStepContext,
-  type ProgressTrackerStepContextInterface,
-  useProgressTrackerContext,
-} from './ProgressTrackerContext'
+import { ProgressTrackerStepContext, useProgressTrackerContext } from './ProgressTrackerContext'
 import { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'
 import { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'
 
@@ -43,28 +31,36 @@ export const ProgressTrackerStep = forwardRef<HTMLLIElement, ProgressTrackerStep
     const stepId = `step-${ID}`
     const stepIndex = [...steps.keys()].indexOf(stepId)
 
-    const disabledAfter = useMemo(() => {
+    const disabledAfter = (() => {
       const nextStepId = [...steps.keys()][stepIndex + 1]
 
       return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))
-    }, [steps, stepIndex])
+    })()
 
-    const [progressState, setProgressState] =
-      useState<ProgressTrackerStepContextInterface['state']>('incomplete')
+    const progressState = (() => {
+      if (stepIndex === currentStepIndex) return 'active'
+      else if (stepIndex < currentStepIndex) return 'complete'
+      else return 'incomplete'
+    })()
 
     useEffect(() => {
-      setSteps(steps => steps.set(stepId, [progressState, disabled ? 'disabled' : '']))
-    }, [disabled, stepId, setSteps, progressState])
+      setSteps(steps => {
+        const newSteps = new Map(steps)
 
-    useEffect(() => {
-      if (stepIndex === currentStepIndex) {
-        setProgressState('active')
-      } else if (stepIndex < currentStepIndex) {
-        setProgressState('complete')
-      } else {
-        setProgressState('incomplete')
+        return newSteps.set(
+          stepId,
+          [progressState, disabled ? 'disabled' : ''].filter(v => !!v)
+        )
+      })
+
+      return () => {
+        setSteps(steps => {
+          steps.delete(stepId)
+
+          return steps
+        })
       }
-    }, [currentStepIndex, stepIndex])
+    }, [disabled, stepId, setSteps, progressState])
 
     return (
       <li
diff --git a/packages/components/progress-tracker/src/ProgressTrackerStepIndicator.tsx b/packages/components/progress-tracker/src/ProgressTrackerStepIndicator.tsx
index 9107a00bab..4d17010919 100644
--- a/packages/components/progress-tracker/src/ProgressTrackerStepIndicator.tsx
+++ b/packages/components/progress-tracker/src/ProgressTrackerStepIndicator.tsx
@@ -16,6 +16,12 @@ type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {
   incomplete?: ReactNode
 }
 
+const CompleteIndicator = () => (
+  <Icon size="sm">
+    <Check />
+  </Icon>
+)
+
 export const ProgressTrackerStepIndicator = ({
   complete,
   incomplete,
@@ -27,19 +33,8 @@ export const ProgressTrackerStepIndicator = ({
     <span className={stepIndicatorVariant({ size, state, className })} aria-hidden="true">
       {size !== 'sm' && (
         <>
-          {state === 'complete' ? (
-            <>
-              {complete === undefined ? (
-                <Icon size="sm">
-                  <Check />
-                </Icon>
-              ) : (
-                complete
-              )}
-            </>
-          ) : (
-            <>{incomplete === undefined ? index + 1 : incomplete}</>
-          )}
+          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}
+          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}
         </>
       )}
     </span>