refactor(FE): Refactor handleBlurField to use useCallback

This commit is contained in:
rstubryan
2026-03-06 13:35:10 +07:00
parent ff6955be54
commit aeceef4361
2 changed files with 37 additions and 23 deletions
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
DeliveryOrderProductFormValues,
DeliveryOrderProductSchema,
@@ -271,15 +271,18 @@ const DeliveryOrderProductForm = ({
// setSelectedProduct(null);
};
const handleBlurField = (field: string) => {
setCurrentInput(field);
const handleBlurField = useCallback(
(field: string) => {
setCurrentInput(field);
handleMarketingCalculation(field, {
values: formik.values,
setFieldValue: formik.setFieldValue,
hasSisaBerat,
});
};
handleMarketingCalculation(field, {
values: formik.values,
setFieldValue: formik.setFieldValue,
hasSisaBerat,
});
},
[formik.values, formik.setFieldValue, hasSisaBerat]
);
// Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
const handleFieldChange = (
@@ -324,8 +327,12 @@ const DeliveryOrderProductForm = ({
const { setValues: setFormikValues } = formik;
const processedInitialValuesRef = useRef<number | null>(null);
useEffect(() => {
if (initialValues) {
if (processedInitialValuesRef.current === initialValues.id) return;
processedInitialValuesRef.current = initialValues.id as number;
if (!Boolean(initialValues.qty)) {
handleResetForm();
} else {
@@ -338,7 +345,7 @@ const DeliveryOrderProductForm = ({
}
}
}
}, [initialValues]);
}, [handleResetForm, initialValues, setFormikValues]);
// ===== Formik Error List =====
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
@@ -356,8 +363,10 @@ const DeliveryOrderProductForm = ({
);
useEffect(() => {
handleBlurField('week');
}, [formik.values.week]);
if (formik.values.week) {
handleBlurField('week');
}
}, [formik.values.week, handleBlurField]);
return (
<>
@@ -5,7 +5,7 @@ import {
SalesOrderProductFormValues,
SalesOrderProductSchema,
} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
import { RefObject, useEffect, useMemo, useState } from 'react';
import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import { Kandang } from '@/types/api/master-data/kandang';
import { WarehouseApi } from '@/services/api/master-data';
@@ -240,15 +240,18 @@ const SalesOrderProductForm = ({
});
};
const handleBlurField = (field: string) => {
setCurrentInput(field);
const handleBlurField = useCallback(
(field: string) => {
setCurrentInput(field);
handleMarketingCalculation(field, {
values: formik.values,
setFieldValue: formik.setFieldValue,
hasSisaBerat,
});
};
handleMarketingCalculation(field, {
values: formik.values,
setFieldValue: formik.setFieldValue,
hasSisaBerat,
});
},
[formik.values, formik.setFieldValue, hasSisaBerat]
);
// Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
const handleFieldChange = (
@@ -307,8 +310,10 @@ const SalesOrderProductForm = ({
);
useEffect(() => {
handleBlurField('week');
}, [formik.values.week]);
if (formik.values.week) {
handleBlurField('week');
}
}, [formik.values.week, handleBlurField]);
return (
<>