From fbb059361862e01a344b79fefc44719adc453dd8 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sun, 31 Jul 2022 23:44:26 +0530
Subject: [PATCH] feat(frontend): wrapped `handleCreate` in `useCallback`

---
 .../src/components/Modal/service/Create.tsx   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/Create.tsx b/services/frontend/src/components/Modal/service/Create.tsx
index 71d84c6..688055d 100644
--- a/services/frontend/src/components/Modal/service/Create.tsx
+++ b/services/frontend/src/components/Modal/service/Create.tsx
@@ -1,9 +1,9 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Formik } from "formik";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Data from "./Data";
-import { CallbackFunction } from "../../../types";
+import { CallbackFunction, IEditServiceForm } from "../../../types";
 import {
   getFinalValues,
   getInitialValues,
@@ -53,11 +53,16 @@ const TabBody = styled("div")`
 const ModalServiceCreate = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-  const handleCreate = (values: any, formik: any) => {
-    onAddEndpoint(getFinalValues(values));
-    formik.resetForm();
-    onHide();
-  };
+
+  const handleCreate = useCallback(
+    (values: IEditServiceForm, formik: any) => {
+      const result = getFinalValues(values);
+      onAddEndpoint(result);
+      formik.resetForm();
+      onHide();
+    },
+    [onAddEndpoint, onHide]
+  );
 
   const initialValues = useMemo(() => getInitialValues(), []);