implement memoizing and avoid invoking callbacks when not required

Author: b-yogesh

chartlets.js/packages/lib/src/actions/handleHostStoreChange.ts

@@ -11,13 +11,16 @@ import { invokeCallbacks } from "@/actions/helpers/invokeCallbacks";
 import type { ContributionState } from "@/types/state/contribution";
 import type { HostStore } from "@/types/state/host";
 import { store } from "@/store";
+import { shallowEqualArrays } from "@/utils/compare";
 
 /**
  * A reference to a property of an input of a callback of a contribution.
  */
 export interface PropertyRef extends ContribRef, CallbackRef, InputRef {
   /** The property. */
   property: string;
+  /** Property ID for memoization */
+  id: string;
 }
 
 export function handleHostStoreChange() {
@@ -44,16 +47,23 @@ export function handleHostStoreChange() {
     hostStore,
   );
 
-  if (callbackRequests && callbackRequests.length > 0) {
-    invokeCallbacks(callbackRequests);
+  const filteredCallbackRequests = callbackRequests.filter(
+    (callbackRequest): callbackRequest is CallbackRequest =>
+      callbackRequest !== undefined,
+  );
+  if (filteredCallbackRequests && filteredCallbackRequests.length > 0) {
+    invokeCallbacks(filteredCallbackRequests);
   }
 }
 
-function getCallbackRequests(
+// Exporting for testing only
+export function getCallbackRequests(
   propertyRefs: PropertyRef[],
   contributionsRecord: Record<string, ContributionState[]>,
   hostStore: HostStore,
-): CallbackRequest[] {
+): (CallbackRequest | undefined)[] {
+  const { configuration, lastInputValues } = store.getState();
+  const { logging } = configuration;
   return propertyRefs.map((propertyRef) => {
     const contributions = contributionsRecord[propertyRef.contribPoint];
     const contribution = contributions[propertyRef.contribIndex];
@@ -63,6 +73,27 @@ function getCallbackRequests(
       contribution,
       hostStore,
     );
+    const propRefId = propertyRef.id;
+    if (
+      lastInputValues?.[propRefId] &&
+      shallowEqualArrays(lastInputValues?.[propRefId], inputValues)
+    ) {
+      // Skip adding the inputValues if memoized values are returned.
+      if (logging?.enabled) {
+        console.groupCollapsed("Skipping callback request");
+        console.log("inputValues", inputValues);
+        console.groupEnd();
+      }
+      return;
+    }
+    if (lastInputValues) {
+      lastInputValues[propRefId] = inputValues;
+      store.setState({
+        lastInputValues: { ...lastInputValues },
+      });
+    } else {
+      store.setState({ lastInputValues: { [propRefId]: inputValues } });
+    }
     return { ...propertyRef, inputValues };
   });
 }
@@ -92,6 +123,7 @@ function getHostStorePropertyRefs(): PropertyRef[] {
                 callbackIndex,
                 inputIndex,
                 property: formatObjPath(input.property),
+                id: `${contribPoint}-${contribIndex}-${callbackIndex}-${inputIndex}`,
               });
             }
           }),

chartlets.js/packages/lib/src/actions/helpers/getInputValues.ts

@@ -13,6 +13,7 @@ import {
 import { formatObjPath, getValue, type ObjPathLike } from "@/utils/objPath";
 import { isObject } from "@/utils/isObject";
 import type { HostStore } from "@/types/state/host";
+import memoize from "fast-memoize";
 
 export function getInputValues(
   inputs: Input[],
@@ -26,7 +27,9 @@ export function getInputValues(
 
 const noValue = {};
 
-export function getInputValue(
+export const getInputValue = memoize(_getInputValue);
+
+function _getInputValue(
   input: Input,
   contributionState: ContributionState,
   hostStore?: HostStore,

chartlets.js/packages/lib/src/types/state/store.ts

@@ -25,4 +25,9 @@ export interface StoreState {
    * See hook `useThemeMode()`.
    */
   themeMode?: ThemeMode;
+  /**
+   * Store last input values for callback requests to avoid invoking them if
+   * there are no changes
+   *  */
+  lastInputValues?: Record<string, unknown[]>;
 }

chartlets.js/packages/lib/src/utils/compare.ts

@@ -0,0 +1,8 @@
+export function shallowEqualArrays(
+  arr1?: unknown[],
+  arr2?: unknown[],
+): boolean {
+  if (!arr1 || !arr2) return false;
+  if (arr1.length !== arr2.length) return false;
+  return arr1.every((val, index) => val === arr2[index]);
+}