@dotcms/experiments 0.0.1-alpha.26 → 0.0.1-alpha.27

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
 import { isInsideEditor } from '@dotcms/client';
 import { jitsuClient } from '@jitsu/sdk-js';
 
@@ -6650,6 +6650,45 @@ const DotExperimentsProvider = ({
   });
 };
 
+/**
+ * Compares two objects and returns true if they are equal, false otherwise.
+ * @param objA The first object to compare.
+ * @param objB The second object to compare.
+ * @returns
+ */
+function shallowEqual(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(objB, key) || !Object.is(objA[key], objB[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+/**
+ * Memoizes an object and returns the memoized object.
+ * Mantaing the same reference if the object is the same independently if is called inside any component.
+ * @param object
+ * @returns
+ */
+function useMemoizedObject(object) {
+  const ref = useRef(object);
+  if (!shallowEqual(ref.current, object)) {
+    ref.current = object;
+  }
+  return ref.current;
+}
+
 /**
  * Wraps a given component with experiment handling capabilities using the 'useExperimentVariant' hook.
  * This HOC checks if the entity's assigned experiment variant differs from the currently displayed variant.
@@ -6663,14 +6702,18 @@ const DotExperimentsProvider = ({
  *          adding experiment handling based on the specified configuration.
  */
 const withExperiments = (WrappedComponent, config) => {
-  return props => {
+  // We need to use a custom memoization hook
+  // because the useMemo or React.memo lose the reference of the object
+  // in each render, causing the experiment handling to be reinitialized.
+  const memoizedConfig = useMemoizedObject(config);
+  return useCallback(props => {
     return jsx(DotExperimentsProvider, {
-      config: Object.assign({}, config),
+      config: memoizedConfig,
       children: jsx(DotExperimentHandlingComponent, Object.assign({}, props, {
         WrappedComponent: WrappedComponent
       }))
     });
-  };
+  }, [WrappedComponent, memoizedConfig]);
 };
 
 export { withExperiments };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/experiments",
-  "version": "0.0.1-alpha.26",
+  "version": "0.0.1-alpha.27",
   "description": "Official JavaScript library to use Experiments with DotCMS.",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.26"
+    "@dotcms/client": "0.0.1-alpha.27"
   },
   "module": "./index.esm.js",
   "type": "module",

package/src/lib/shared/utils/memoize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Memoizes an object and returns the memoized object.
+ * Mantaing the same reference if the object is the same independently if is called inside any component.
+ * @param object
+ * @returns
+ */
+export declare function useMemoizedObject<T extends object>(object: T): T;