is require to add useMemo on a onClick function in react?

Viewed 23

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.

0 Answers
Related