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,10 +139,19 @@ const ExpenseKandangsTable = ({
 
   useEffect(() => {
     setOpen(isResponseSuccess(kandangs) ? kandangs.data.length > 0 : false);
-  }, [kandangs, isResponseSuccess]);
+  }, [kandangs]);
 
   useEffect(() => {
-    if (Object.keys(rowSelection).length !== 0 && isResponseSuccess(kandangs)) {
+    const currentKeys = Object.keys(rowSelection).sort().join(',');
+    const prevKeys = Object.keys(prevRowSelectionRef.current).sort().join(',');
+
+    if (currentKeys !== prevKeys) {
+      prevRowSelectionRef.current = { ...rowSelection };
+
+      if (
+        Object.keys(rowSelection).length !== 0 &&
+        isResponseSuccess(kandangs)
+      ) {
         const formattedSelectedKandangs = Object.keys(rowSelection).map(
           (item) => {
             const selectedKandang = kandangs.data.find(
@@ -151,15 +166,16 @@ const ExpenseKandangsTable = ({
         );
 
         onChange(formattedSelectedKandangs);
-    } else {
+      } 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({});
     }

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
@@ -90,6 +90,7 @@ const ExpenseRealizationForm = ({
 
   const formik = useFormik<ExpenseRealizationFormValues>({
     initialValues: getExpenseRealizationFormInitialValues(initialValues),
+    enableReinitialize: true,
     validationSchema:
       type === 'edit'
         ? UpdateExpenseRealizationFormSchema
@@ -143,7 +144,6 @@ const ExpenseRealizationForm = ({
     },
   });
 
-  const { setValues: formikSetValues } = formik;
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   const {
@@ -254,10 +254,6 @@ const ExpenseRealizationForm = ({
     formik.setFieldValue('documents', newRequestDocuments);
   };
 
-  useEffect(() => {
-    formikSetValues(getExpenseRealizationFormInitialValues(initialValues));
-  }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
-
   return (
     <section className='w-full'>
       <header className='flex flex-col gap-4'>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import { toast } from 'react-hot-toast';
@@ -102,6 +102,7 @@ const ExpenseRequestForm = ({
 
   const formik = useFormik<ExpenseRequestFormValues>({
     initialValues: getExpenseFormInitialValues(initialValues),
+    enableReinitialize: true,
     validationSchema:
       type === 'edit'
         ? UpdateExpenseRequestFormSchema
@@ -171,7 +172,7 @@ const ExpenseRequestForm = ({
     },
   });
 
-  const { setValues: formikSetValues } = formik;
+  const { setFieldValue, setFieldTouched } = formik;
 
   const {
     setInputValue: setLocationInputValue,
@@ -186,8 +187,8 @@ const ExpenseRequestForm = ({
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('category', true);
+    setFieldTouched('category', true);
-    formik.setFieldValue('category', val);
+    setFieldValue('category', val);
   };
 
   const locationChangeHandler = useCallback(
@@ -195,12 +196,12 @@ const ExpenseRequestForm = ({
       const location = val as OptionType | null;
       const locationId = location ? Number(location.value) : 0;
 
-      formik.setFieldTouched('location', true);
+      setFieldTouched('location', true);
-      formik.setFieldValue('location', location);
+      setFieldValue('location', location);
-      formik.setFieldTouched('location_id', true);
+      setFieldTouched('location_id', true);
-      formik.setFieldValue('location_id', locationId);
+      setFieldValue('location_id', locationId);
     },
-    []
+    [setFieldTouched, setFieldValue]
   );
 
   const kandangsChangeHandler = (
@@ -343,10 +344,6 @@ const ExpenseRequestForm = ({
     formik.handleSubmit(e);
   };
 
-  useEffect(() => {
-    formikSetValues(getExpenseFormInitialValues(initialValues));
-  }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
-
   return (
     <>
       <section className='w-full'>