refactor(EstimateCost): improve re-render performances (#4489)

scaleway · Nov 22, 2024 · 70a3515 · 70a3515
1 parent 84d8445
commit 70a3515
Show file tree

Hide file tree

Showing 16 changed files with 580 additions and 549 deletions.
diff --git a/.changeset/spicy-months-sniff.md b/.changeset/spicy-months-sniff.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+Improve render performances on `<EstimateCost />`
diff --git a/packages/plus/src/components/EstimateCost/Components/CustomUnitInput.tsx b/packages/plus/src/components/EstimateCost/Components/CustomUnitInput.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { useEstimateCost } from '../EstimateCostProvider'
 import type { Iteration, Units } from '../types'
 import { UnitInput } from './UnitInput'
@@ -10,49 +10,51 @@ type CustomUnitInputProps = {
   timeUnits: Units[]
 }
 
-export const CustomUnitInput = ({
-  defaultTimeUnit = 'hours',
-  setIteration,
-  iteration,
-  timeUnits,
-}: CustomUnitInputProps) => {
-  const { locales } = useEstimateCost()
+export const CustomUnitInput = memo(
+  ({
+    defaultTimeUnit = 'hours',
+    setIteration,
+    iteration,
+    timeUnits,
+  }: CustomUnitInputProps) => {
+    const { locales } = useEstimateCost()
 
-  const options = useMemo(
-    () =>
-      timeUnits.map(unit => ({
-        value: unit,
-        label: locales[`estimate.cost.units.${unit}.label`],
-      })),
-    [timeUnits, locales],
-  )
+    const options = useMemo(
+      () =>
+        timeUnits.map(unit => ({
+          value: unit,
+          label: locales[`estimate.cost.units.${unit}.label`],
+        })),
+      [timeUnits, locales],
+    )
 
-  const defaultOption = useMemo(
-    () => options.find(({ value }) => value === defaultTimeUnit),
-    [defaultTimeUnit, options],
-  )
+    const defaultOption = useMemo(
+      () => options.find(({ value }) => value === defaultTimeUnit),
+      [defaultTimeUnit, options],
+    )
 
-  return (
-    <UnitInput
-      name="iteration"
-      onChange={inputValue =>
-        setIteration({
-          unit: iteration.unit,
-          value: inputValue,
-        })
-      }
-      onChangeUnitValue={unitValue => {
-        setIteration({
-          unit: unitValue as Units,
-          value: iteration.value,
-        })
-      }}
-      placeholder="0"
-      value={iteration.value}
-      unitValue={iteration.unit || defaultOption?.value}
-      minValue={1}
-      size="medium"
-      options={options}
-    />
-  )
-}
+    return (
+      <UnitInput
+        name="iteration"
+        onChange={inputValue =>
+          setIteration({
+            unit: iteration.unit,
+            value: inputValue,
+          })
+        }
+        onChangeUnitValue={unitValue => {
+          setIteration({
+            unit: unitValue as Units,
+            value: iteration.value,
+          })
+        }}
+        placeholder="0"
+        value={iteration.value}
+        unitValue={iteration.unit || defaultOption?.value}
+        minValue={1}
+        size="medium"
+        options={options}
+      />
+    )
+  },
+)