reduced actions for global variables

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/generators/hookToComp.tsx

@@ -36,9 +36,11 @@ export function hookToStateComp(useHookFn: () => JSONObject) {
       const hookValue = useHookFn();
       const stateValue = useMemo(() => comp.children.stateValue.getView(), [comp.children.stateValue]);
 
-      if (!isEqual(hookValue, stateValue)) {
-        comp.children.stateValue.dispatchChangeValueAction(hookValue);
-      }
+      useEffect(() => {
+        if (!isEqual(hookValue, stateValue)) {
+          comp.children.stateValue.dispatchChangeValueAction(hookValue);
+        }
+      }, [hookValue, stateValue]);
       return null;
     }
   );

client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx

@@ -22,7 +22,9 @@ type ScreenInfo = {
 export function useScreenInfo() {
   const canvasContainer = document.getElementById(CanvasContainerID);
   const canvas = document.getElementsByClassName('lowcoder-app-canvas')?.[0];
-  const canvasWidth = canvasContainer?.clientWidth || canvas?.clientWidth;
+  const canvasWidth = useMemo(() => {
+    return canvasContainer?.clientWidth || canvas?.clientWidth;
+  }, [canvasContainer?.clientWidth, canvas?.clientWidth]);
 
   const getDeviceType = (width: number) => {
     if (width < 768) return ScreenTypes.Mobile;
@@ -71,7 +73,9 @@ export function useScreenInfo() {
   }, [ updateScreenInfo ])
 
   useEffect(() => {
-    updateScreenInfo();
+    if (canvasWidth) {
+      updateScreenInfo();
+    }
   }, [canvasWidth]);
 
   return screenInfo;

client/packages/lowcoder/src/comps/hooks/themeComp.tsx

@@ -64,12 +64,15 @@ let ThemeTempComp = withViewFn(
       return stateValue;
     }, [themeList, currentTheme, stateValue])
 
-    if (!isEqual(themeValue, stateValue)) {
-      comp.children.stateValue.dispatchChangeValueAction({
-        ...exposingTheme(currentTheme),
-        allThemes: themeList.map((t) => exposingTheme(t)),
-      })
-    }
+    useEffect(() => {
+      if (!isEqual(themeValue, stateValue)) {
+        comp.children.stateValue.dispatchChangeValueAction({
+          ...exposingTheme(currentTheme),
+          allThemes: themeList.map((t) => exposingTheme(t)),
+        })
+      }
+    }, [themeValue, stateValue]);
+
     return null;
   }
 );