From bf4e8ec7197ec4e93b771c75da59d7d2616b6013 Mon Sep 17 00:00:00 2001
From: Hoang Dinh <patrick.dinh@makerx.com.au>
Date: Wed, 4 Dec 2024 12:50:52 +1000
Subject: [PATCH] bug - wrap use-dialog-form open in a useCallback

---
 src/features/common/hooks/use-dialog-form.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/features/common/hooks/use-dialog-form.tsx b/src/features/common/hooks/use-dialog-form.tsx
index fadc376e..3a95e9f8 100644
--- a/src/features/common/hooks/use-dialog-form.tsx
+++ b/src/features/common/hooks/use-dialog-form.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, MediumSizeDialogBody } from '../components/dialog'
 import { Description } from '@radix-ui/react-dialog'
 
@@ -48,14 +48,16 @@ export function useDialogForm<TDataIn, TDataOut>({ dialogHeader, dialogBody: Dia
     </Dialog>
   )
 
+  const open = useCallback((dialogData: TDataIn) => {
+    setIsOpen(true)
+    setDialogData(dialogData)
+    return new Promise<TDataOut | undefined>((resolve) => {
+      setResolvePromise(() => resolve)
+    })
+  }, [])
+
   return {
-    open: (dialogData: TDataIn) => {
-      setIsOpen(true)
-      setDialogData(dialogData)
-      return new Promise<TDataOut | undefined>((resolve) => {
-        setResolvePromise(() => resolve)
-      })
-    },
+    open,
     dialog,
   }
 }