Refactor UGN-244 improve useMemo dependencies

src/steps/ValidationStep/ValidationStep.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 import { Box, Button, Heading, Switch } from "@chakra-ui/react"
 import { ContinueButton } from "../../components/ContinueButton"
 import { useRsi } from "../../hooks/useRsi"
@@ -23,16 +23,11 @@ export const ValidationStep = <T,>({ initialData, onSubmit }: Props<T>) => {
   const { fields, rowHook, tableHook, initialHook = (table) => table } = useRsi()
 
   const [data, setData] = useState<(T & Meta)[]>(
-    addErrorsAndRunHooks(addIndexes(initialHook(initialData)), fields, rowHook, tableHook),
+    useMemo(() => addErrorsAndRunHooks(addIndexes(initialHook(initialData)), fields, rowHook, tableHook), []),
   )
   const [selectedRows, setSelectedRows] = useState<ReadonlySet<number | string>>(new Set())
   const [filterByErrors, setFilterByErrors] = useState(false)
 
-  const updateRow = (rows: typeof data) => {
-    setData(addErrorsAndRunHooks(rows, fields, rowHook, tableHook))
-  }
-  const columns = useMemo(() => generateColumns(fields), [])
-
   const deleteSelectedRows = () => {
     if (selectedRows.size) {
       const newData = data.filter((value) => !selectedRows.has(value.__index))
@@ -41,13 +36,24 @@ export const ValidationStep = <T,>({ initialData, onSubmit }: Props<T>) => {
     }
   }
 
+  const updateRow = useCallback(
+    (rows: typeof data) => {
+      setData(addErrorsAndRunHooks(rows, fields, rowHook, tableHook))
+    },
+    [setData, addErrorsAndRunHooks, rowHook, tableHook],
+  )
+
+  const columns = useMemo(() => generateColumns(fields), [fields, generateColumns])
+
   const tableData = useMemo(() => {
     if (filterByErrors) {
       return data.filter((value) => value?.__errors)
     }
     return data
   }, [data, filterByErrors])
 
+  const rowKeyGetter = useCallback((row: T & Meta) => row.__index, [])
+
   return (
     <>
       <Box display="flex" p="2rem" pb={0} flexDirection="column" flex={1} overflow="auto" height="100%">
@@ -65,7 +71,7 @@ export const ValidationStep = <T,>({ initialData, onSubmit }: Props<T>) => {
           </Box>
         </Box>
         <Table
-          rowKeyGetter={(row) => row.__index}
+          rowKeyGetter={rowKeyGetter}
           rows={tableData}
           onRowsChange={updateRow}
           columns={columns}

src/steps/ValidationStep/components/columns.tsx

@@ -81,32 +81,42 @@ export const generateColumns = <T,>(fields: Fields<T>) => [
         editOnClick: true,
       },
       formatter: ({ row, onRowChange }) => {
-        const component =
-          column.fieldType.type === "checkbox" ? (
-            <Box
-              display="flex"
-              alignItems="center"
-              height="100%"
-              onClick={(event) => {
-                event.stopPropagation()
-              }}
-            >
-              <Switch
-                isChecked={row[column.key] as boolean}
-                onChange={() => {
-                  onRowChange({ ...row, [column.key]: !row[column.key] })
+        let component
+
+        switch (column.fieldType.type) {
+          case "checkbox":
+            component = (
+              <Box
+                display="flex"
+                alignItems="center"
+                height="100%"
+                onClick={(event) => {
+                  event.stopPropagation()
                 }}
-              />
-            </Box>
-          ) : column.fieldType.type === "select" ? (
-            <Box minWidth="100%" minHeight="100%" overflow="hidden" textOverflow="ellipsis">
-              {column.fieldType.options.find((option) => option.value === row[column.key])?.label || null}
-            </Box>
-          ) : (
-            <Box minWidth="100%" minHeight="100%" overflow="hidden" textOverflow="ellipsis">
-              {row[column.key]}
-            </Box>
-          )
+              >
+                <Switch
+                  isChecked={row[column.key] as boolean}
+                  onChange={() => {
+                    onRowChange({ ...row, [column.key]: !row[column.key] })
+                  }}
+                />
+              </Box>
+            )
+            break
+          case "select":
+            component = (
+              <Box minWidth="100%" minHeight="100%" overflow="hidden" textOverflow="ellipsis">
+                {column.fieldType.options.find((option) => option.value === row[column.key])?.label || null}
+              </Box>
+            )
+            break
+          default:
+            component = (
+              <Box minWidth="100%" minHeight="100%" overflow="hidden" textOverflow="ellipsis">
+                {row[column.key]}
+              </Box>
+            )
+        }
 
         if (row.__errors?.[column.key]) {
           return (

src/steps/ValidationStep/stories/Validation.stories.tsx

@@ -1,5 +1,4 @@
-import { Box, extendTheme } from "@chakra-ui/react"
-import { colorSchemeOverrides, themeOverrides } from "../../../theme"
+import { Box } from "@chakra-ui/react"
 import { editableTableInitialData, mockRsiValues } from "../../../stories/mockRsiValues"
 import { ValidationStep } from "../ValidationStep"
 import { Providers } from "../../../components/Providers"

src/steps/ValidationStep/types.ts

@@ -1,4 +1,4 @@
-import type {Info} from "../../types";
+import type { Info } from "../../types"
 
 export type Data = { [key: string]: string | boolean | number | undefined }
 export type Meta = { __index: number; __errors?: Error | null }