optimise event handler control

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx

@@ -20,7 +20,7 @@ import {
   QueryConfigItemWrapper,
   ValueFromOption,
 } from "lowcoder-design";
-import { Fragment, ReactNode, useContext, useEffect, useState} from "react";
+import { Fragment, ReactNode, useContext, useEffect, useState, useRef, useCallback } from "react";
 import { memo } from "util/cacheUtils";
 import { EditorContext } from "../editorState";
 import { ActionSelectorControl } from "./actionSelector/actionSelectorControl";
@@ -59,7 +59,12 @@ class SingleEventHandlerControl<
         return;
       }
       if (handler) {
-        return handler();
+        try {
+          return handler();
+        } catch (error) {
+          console.error('Error in event handler:', error);
+          return Promise.reject(error);
+        }
       }
     };
   }
@@ -142,10 +147,9 @@ const EventHandlerControlPropertyView = (props: {
   type?: "query";
   eventConfigs: EventConfigsType;
 }) => {
-
-  
   const editorState = useContext(EditorContext);
   const [showNewCreate, setShowNewCreate] = useState(false);
+  const mountedRef = useRef(true);
 
   const {
     dispatch,
@@ -157,14 +161,27 @@ const EventHandlerControlPropertyView = (props: {
     type
   } = props;
 
-  useEffect(() => setShowNewCreate(false), [dispatch]);
+  // Reset state on unmount
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+      setShowNewCreate(false);
+    };
+  }, []);
+
+  // Reset showNewCreate when dispatch changes
+  useEffect(() => {
+    if (mountedRef.current) {
+      setShowNewCreate(false);
+    }
+  }, [dispatch]);
 
   const queryHandler = {
     name: eventConfigs[0].value,
   };
 
-  const handleAdd = () => {
-    if (eventConfigs.length === 0) {
+  const handleAdd = useCallback(() => {
+    if (eventConfigs.length === 0 || !mountedRef.current) {
       return;
     }
 
@@ -190,8 +207,10 @@ const EventHandlerControlPropertyView = (props: {
       handler: isInDevIde ? messageHandler : queryExecHandler,
     } as const;
     dispatch(pushAction(type !== "query" ? newHandler : queryHandler));
-    setShowNewCreate(true);
-  };
+    if (mountedRef.current) {
+      setShowNewCreate(true);
+    }
+  }, [dispatch, eventConfigs, editorState, pushAction, type]);
 
   const renderItems = () =>
     items.length > 0 ? (
@@ -251,7 +270,12 @@ class EventHandlerControl<T extends EventConfigsType> extends list(SingleEventHa
       super.getView().forEach((child) => {
         const ret = child.getView()(eventName);
         if (ret) {
-          list.push(ret);
+          list.push(
+            Promise.resolve(ret).catch(error => {
+              console.error('Error in event handler:', error);
+              return Promise.reject(error);
+            })
+          );
         }
       });
       return Promise.all(list);