perf(flow): ⚡️ Better save management

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -155,11 +155,14 @@ export const TypebotContext = ({
     })
   }
 
-  useAutoSave({
+  useAutoSave(
+    {
       handler: saveTypebot,
       item: localTypebot,
       debounceTimeout: autoSaveTimeout,
-  })
+    },
+    [typebot, publishedTypebot, webhooks]
+  )
 
   useEffect(() => {
     Router.events.on('routeChangeStart', saveTypebot)
@@ -167,7 +170,7 @@ export const TypebotContext = ({
       Router.events.off('routeChangeStart', saveTypebot)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [typebot, publishedTypebot, webhooks])
 
   const [isSavingLoading, setIsSavingLoading] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)
@@ -211,7 +214,7 @@ export const TypebotContext = ({
         perform: () => saveTypebot(),
       },
     ],
-    []
+    [typebot, publishedTypebot, webhooks]
   )
 
   useRegisterActions(
@@ -366,7 +369,8 @@ export const useFetchedTypebot = ({
   }
 }
 
-const useAutoSave = <T,>({
+const useAutoSave = <T,>(
+  {
     handler,
     item,
     debounceTimeout,
@@ -375,7 +379,9 @@ const useAutoSave = <T,>({
     handler: (item?: T) => Promise<any>
     item?: T
     debounceTimeout: number
-}) => {
+  },
+  dependencies: unknown[]
+) => {
   const [debouncedItem] = useDebounce(item, debounceTimeout)
   useEffect(() => {
     const save = () => handler(item)
@@ -384,7 +390,7 @@ const useAutoSave = <T,>({
       document.removeEventListener('visibilitychange', save)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, dependencies)
   return useEffect(() => {
     handler(item)
     // eslint-disable-next-line react-hooks/exhaustive-deps