fix: added memo in useEvaluate

apps/kitchen-sink/src/ensemble/screens/testActions.yaml

@@ -122,7 +122,7 @@ View:
             label: Tap to pick an image
             onTap:
               pickFiles:
-                allowedExtensions: ["jpg", "png", "pdf", "docs"]
+                allowMultiple: true
                 onComplete:
                   executeConditionalAction:
                     conditions:

packages/framework/src/hooks/__tests__/useRegisterBindings.test.ts

@@ -1,10 +1,12 @@
 /* eslint import/first: 0 */
 import { renderHook } from "@testing-library/react";
 import { getDefaultStore } from "jotai";
+import { useCallback } from "react";
+import isEqual from "react-fast-compare";
+import _, { values } from "lodash";
 import { useRegisterBindings } from "../useRegisterBindings";
 import { screenAtom } from "../../state";
 import { screenStorageAtom } from "../useEnsembleStorage";
-import { useCallback } from "react";
 
 const mockInvokable = {
   id: "test",
@@ -339,7 +341,7 @@ test("evaluates flutter style hex codes expressions", () => {
   });
 });
 
-test.only("should keep the same callback reference when dependencies do not change", () => {
+test("should keep the same callback reference when dependencies do not change", () => {
   const { result, rerender } = renderHook(
     ({ dependency }) =>
       useCallback(() => {
@@ -401,3 +403,31 @@ test("should keep the same reference for all functions inside an object when dep
   expect(firstMultiply.toString()).toBe(secondMultiply.toString());
   expect(firstDivide.toString()).toBe(secondDivide.toString());
 });
+
+test("compare arrays with react fast compare isEqual", () => {
+  const newValues = {
+    allowedExtensions: ["jpg", "png", "pdf", "docs"],
+  };
+
+  const prevValues = {
+    values: {
+      allowedExtensions: ["jpg", "png", "pdf", "docs"],
+    },
+  };
+
+  expect(isEqual(newValues, prevValues.values)).toBe(true);
+});
+
+test("compare arrays with lodash isEqual", () => {
+  const newValues = {
+    allowedExtensions: ["jpg", "png", "pdf", "docs"],
+  };
+
+  const prevValues = {
+    values: {
+      allowedExtensions: ["jpg", "png", "pdf", "docs"],
+    },
+  };
+
+  expect(_.isEqual(newValues, prevValues.values)).toBe(true);
+});

packages/framework/src/hooks/useEvaluate.ts

@@ -64,7 +64,9 @@ export const useEvaluate = <T extends Record<string, unknown>>(
     return result;
   }, [values, translate]);
 
-  const updatedValues = merge({}, values, bindings, translatedkeys);
+  const updatedValues = useMemo(() => {
+    return merge({}, values, bindings, translatedkeys);
+  }, [values, bindings, translatedkeys]);
 
   // evaluate flutter color hex codes
   const hexCodes = useMemo(() => {
@@ -83,5 +85,7 @@ export const useEvaluate = <T extends Record<string, unknown>>(
     return result;
   }, [updatedValues]);
 
-  return merge({}, updatedValues, hexCodes);
+  return useMemo(() => {
+    return merge({}, updatedValues, hexCodes);
+  }, [updatedValues, hexCodes]);
 };

packages/framework/src/hooks/useScreenData.ts

@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from "jotai";
 import { clone } from "lodash-es";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import isEqual from "react-fast-compare";
 import type { Response, WebSocketConnection } from "../data";
 import type {
@@ -25,8 +25,8 @@ export const useScreenData = (): {
   const sockets = useAtomValue(screenSocketAtom);
   const [data, setDataAtom] = useAtom(screenDataAtom);
 
-  const mockResponses = useEvaluate(
-    apis?.reduce(
+  const apiMockResponses = useMemo(() => {
+    return apis?.reduce(
       (
         acc: { [key: string]: EnsembleMockResponse | string | undefined },
         api,
@@ -35,8 +35,10 @@ export const useScreenData = (): {
         return acc;
       },
       {},
-    ),
-  );
+    );
+  }, [apis]);
+
+  const mockResponses = useEvaluate(apiMockResponses);
 
   const setData = useCallback(
     (name: string, response: Response | WebSocketConnection) => {
@@ -49,11 +51,14 @@ export const useScreenData = (): {
     [data, setDataAtom],
   );
 
-  return {
-    apis,
-    sockets,
-    data,
-    setData,
-    mockResponses,
-  };
+  return useMemo(
+    () => ({
+      apis,
+      sockets,
+      data,
+      setData,
+      mockResponses,
+    }),
+    [apis, sockets, data, mockResponses],
+  );
 };

packages/framework/src/shared/actions.ts

@@ -128,7 +128,7 @@ export interface ShowToastAction {
 }
 
 export interface PickFilesAction {
-  id: string;
+  id?: string;
   allowMultiple?: boolean;
   allowedExtensions?: string[];
   allowMaxFileSizeBytes?: number;

packages/runtime/src/runtime/hooks/useEnsembleAction.tsx

@@ -309,6 +309,7 @@ export const useConnectSocket: EnsembleActionHook<ConnectSocketAction> = (
     };
     return { callback };
   }, [
+    screenData,
     socket,
     onSocketConnectAction?.callback,
     onMessageReceiveAction?.callback,
@@ -359,7 +360,7 @@ export const useDisconnectSocket: EnsembleActionHook<DisconnectSocketAction> = (
       }
     };
     return { callback };
-  }, [action?.name]);
+  }, [screenData, action?.name]);
 
   return disconnectSocket;
 };
@@ -426,24 +427,21 @@ export const useShowDialog: EnsembleActionHook<ShowDialogAction> = (
 export const usePickFiles: EnsembleActionHook<PickFilesAction> = (
   action?: PickFilesAction,
 ) => {
+  const { onComplete, onError, ...rest } = action || {};
   const [files, setFiles] = useState<File[]>();
   const [isComplete, setIsComplete] = useState<boolean>();
-  const onCompleteAction = useEnsembleAction(action?.onComplete);
-  const onErrorAction = useEnsembleAction(action?.onError);
+  const onCompleteAction = useEnsembleAction(onComplete);
+  const onErrorAction = useEnsembleAction(onError);
 
   const { values } = useRegisterBindings(
     {
       files,
-      ...action,
+      ...rest,
     },
     action?.id,
     {
       setFiles,
     },
-    {
-      // need to override default comparator with isEqual for File object
-      comparator: isEqual,
-    },
   );
 
   const inputEl = useMemo(() => {
@@ -517,14 +515,16 @@ export const usePickFiles: EnsembleActionHook<PickFilesAction> = (
     onErrorAction?.callback,
   ]);
 
+  console.log(">>>>> ensemble action");
+
   const callback = useCallback((): void => {
     try {
       inputEl.click();
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
     }
-  }, []);
+  }, [inputEl]);
 
   return { callback };
 };
@@ -651,7 +651,7 @@ export const useActionGroup: EnsembleActionHook<ExecuteActionGroupAction> = (
     };
 
     return { callback };
-  }, []);
+  }, [actions]);
 };
 
 export const useDispatchEvent: EnsembleActionHook<DispatchEventAction> = (