refactor(FE): Refactor form components to improve state handling

src/components/pages/expense/form/ExpenseKandangsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
@@ -75,6 +75,12 @@ const ExpenseKandangsTable = ({
         .filter((id): id is number => id !== undefined)
     )
   );
+  const rowSelectionRef = useRef(rowSelection);
+  const prevRowSelectionRef = useRef<Record<string, boolean>>({});
+
+  useEffect(() => {
+    rowSelectionRef.current = rowSelection;
+  }, [rowSelection]);
 
   const kandangsColumns: ColumnDef<Kandang>[] = [
     {
@@ -133,33 +139,43 @@ const ExpenseKandangsTable = ({
 
   useEffect(() => {
     setOpen(isResponseSuccess(kandangs) ? kandangs.data.length > 0 : false);
-  }, [kandangs, isResponseSuccess]);
+  }, [kandangs]);
 
   useEffect(() => {
-    if (Object.keys(rowSelection).length !== 0 && isResponseSuccess(kandangs)) {
-      const formattedSelectedKandangs = Object.keys(rowSelection).map(
-        (item) => {
-          const selectedKandang = kandangs.data.find(
-            (kandang) => kandang.id === parseInt(item)
-          );
+    const currentKeys = Object.keys(rowSelection).sort().join(',');
+    const prevKeys = Object.keys(prevRowSelectionRef.current).sort().join(',');
 
-          return {
-            id: parseInt(item),
-            name: selectedKandang?.name ?? 'Kandang tidak ditemukan!',
-          };
-        }
-      );
+    if (currentKeys !== prevKeys) {
+      prevRowSelectionRef.current = { ...rowSelection };
 
-      onChange(formattedSelectedKandangs);
-    } else {
-      onChange([]);
+      if (
+        Object.keys(rowSelection).length !== 0 &&
+        isResponseSuccess(kandangs)
+      ) {
+        const formattedSelectedKandangs = Object.keys(rowSelection).map(
+          (item) => {
+            const selectedKandang = kandangs.data.find(
+              (kandang) => kandang.id === parseInt(item)
+            );
+
+            return {
+              id: parseInt(item),
+              name: selectedKandang?.name ?? 'Kandang tidak ditemukan!',
+            };
+          }
+        );
+
+        onChange(formattedSelectedKandangs);
+      } else if (Object.keys(rowSelection).length === 0) {
+        onChange([]);
+      }
     }
-  }, [rowSelection]);
+  }, [rowSelection, kandangs, onChange]);
 
   useEffect(() => {
     if (
       selectedKandangs.length === 0 &&
-      Object.keys(rowSelection).length !== 0
+      Object.keys(rowSelectionRef.current).length !== 0
     ) {
       setRowSelection({});
     }