I'm confused about useMemo hook. I know we use useMemo hook on expensive functions to prevent reCreating this function with every render.
but my question is we must also use useMemo in a function that runs when clicking a button?
like below. because I just want to call a method when clicking not any state change(no dependency)
const Info = () => {
const [saveCustomer, { isLoading }] = useSaveCustomerMutation();
const dispatch = useAppDispatch();
const { newCustomerFields } = useAppSelector((state) => state.customer);
useEffect(() => {
dispatch(setSaveLoaderDialog(isLoading));
}, [isLoading]);
const handleSaveCustomer = () => {
saveCustomer(newCustomerFields)
.unwrap()
.then((result) => {
dispatch(setCustomerId(result.customerId));
dispatch(setDialogCustomerId(result.customerId));
dispatch(
setTaskResultAlert({
message: "مشتری با موفقیت افزوده شد",
show: true,
type: 1,
})
);
})
.catch((err) => {
dispatch(
setTaskResultAlert({
message: "خطایی رخ داده است . مجددا تلاش نمایید",
show: true,
type: 2,
})
);
});
} else {
if (!fname) {
dispatch(
changeCustomerInputError({
error: true,
messages: "نام را وارد نمایید",
position: 1,
})
);
}
if (!family) {
dispatch(
changeCustomerInputError({
error: true,
messages: "نام خانوادگی را وارد نمایید",
position: 2,
})
);
if (phoneNumbers.length === 0) {
dispatch(
changeCustomerInputError({
error: true,
messages: "شماره تماسی را وارد نمایید",
position: 0,
})
);
}
}
try {
} catch (err) {}
};
return (
<section className="w-full fadeIn md:w-3/5 lg:w-full h-full relative flex flex-col items-end px-4 ">
<div
className=" h-[90%] grid grid-cols-1 xl:grid-cols-2 w-full items-start overflow-y-auto "
id="hiddenScrollBar"
>
<BaseContent />
<SupplementaryContent />
</div>
<div className="flex w-full h-[10%] items-center justify-end ">
<button
onClick={() => handleSaveCustomer()}
className="buttonStyle md:w-auto gap-x-2"
>
<IoAddSharp size={20} />
ثبت مشتری
</button>
</div>
</section>
);
};
export default Info;
my Info component rendered on each input field value changed.