@ninetailed/experience.js-react 3.0.1-beta.3 → 3.0.1-beta.4

package/index.esm.js

@@ -1,7 +1,8 @@
-import React, { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useMemo, useContext, useState, useRef, useEffect, useCallback } from 'react';
 import { Ninetailed, selectVariant, selectDistribution, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
+import isEqual from 'lodash/isEqual';
+import { logger, isBrowser } from '@ninetailed/experience.js-shared';
 import { useInView } from 'react-intersection-observer';
-import { isBrowser } from '@ninetailed/experience.js-shared';
 import get$1 from 'lodash/get';
 import has$1 from 'lodash/has';
 
@@ -1612,11 +1613,37 @@ $$2({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
 const useProfile = () => {
   const ninetailed = useNinetailed();
   const [profileState, setProfileState] = useState(ninetailed.profileState);
+  const profileStateRef = useRef({});
+  /**
+   * This effect compares the old and new profile state before updating it.
+   * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
+   * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
+   * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
+   */
+
   useEffect(() => {
-    return ninetailed.onProfileChange(profileState => {
-      setProfileState(profileState);
+    ninetailed.onProfileChange(profileState => {
+      if (isEqual(profileState, profileStateRef.current)) {
+        logger.debug("Profile State Did Not Change", profileState);
+        return;
+      } else {
+        setProfileState(profileState);
+        profileStateRef.current = profileState;
+        logger.debug("Profile State Changed", profileState);
+      }
     });
   }, []);
+  /**
+   * Old implementation without profile state deep comparison
+   */
+
+  /*useEffect(() => {
+   return ninetailed.onProfileChange((profileState) => {
+     console.log('profileState', profileState);
+     setProfileState(profileState);
+   });
+  }, []);*/
+
   return Object.assign(Object.assign({}, profileState), {
     loading: profileState.status === 'loading'
   });
@@ -2487,16 +2514,19 @@ const useExperience = ({
   });
 
   if (status === 'loading') {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
 
   if (status === 'error') {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
 
   if (!profile) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }
@@ -2509,6 +2539,7 @@ const useExperience = ({
   });
 
   if (!experience) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return emptyReturn;
   }

package/index.umd.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ninetailed/experience.js'), require('react-intersection-observer'), require('@ninetailed/experience.js-shared'), require('lodash/get'), require('lodash/has')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'react-intersection-observer', '@ninetailed/experience.js-shared', 'lodash/get', 'lodash/has'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.reactIntersectionObserver, global.experience_jsShared, global.get$1, global.has$1));
-})(this, (function (exports, React, experience_js, reactIntersectionObserver, experience_jsShared, get$1, has$1) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ninetailed/experience.js'), require('lodash/isEqual'), require('@ninetailed/experience.js-shared'), require('react-intersection-observer'), require('lodash/get'), require('lodash/has')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ninetailed/experience.js', 'lodash/isEqual', '@ninetailed/experience.js-shared', 'react-intersection-observer', 'lodash/get', 'lodash/has'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.experience_js, global.isEqual, global.experience_jsShared, global.reactIntersectionObserver, global.get$1, global.has$1));
+})(this, (function (exports, React, experience_js, isEqual, experience_jsShared, reactIntersectionObserver, get$1, has$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
   var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
   var has__default = /*#__PURE__*/_interopDefaultLegacy(has$1);
 
@@ -116,11 +117,37 @@
         profileState = _a[0],
         setProfileState = _a[1];
 
+    var profileStateRef = React.useRef({});
+    /**
+     * This effect compares the old and new profile state before updating it.
+     * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
+     * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
+     * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
+     */
+
     React.useEffect(function () {
-      return ninetailed.onProfileChange(function (profileState) {
-        setProfileState(profileState);
+      ninetailed.onProfileChange(function (profileState) {
+        if (isEqual__default["default"](profileState, profileStateRef.current)) {
+          experience_jsShared.logger.debug("Profile State Did Not Change", profileState);
+          return;
+        } else {
+          setProfileState(profileState);
+          profileStateRef.current = profileState;
+          experience_jsShared.logger.debug("Profile State Changed", profileState);
+        }
       });
     }, []);
+    /**
+     * Old implementation without profile state deep comparison
+     */
+
+    /*useEffect(() => {
+     return ninetailed.onProfileChange((profileState) => {
+       console.log('profileState', profileState);
+       setProfileState(profileState);
+     });
+    }, []);*/
+
     return __assign(__assign({}, profileState), {
       loading: profileState.status === 'loading'
     });
@@ -2038,16 +2065,19 @@
     });
 
     if (status === 'loading') {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
 
     if (status === 'error') {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
 
     if (!profile) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }
@@ -2060,6 +2090,7 @@
     });
 
     if (!experience) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       return emptyReturn;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "3.0.1-beta.3",
+  "version": "3.0.1-beta.4",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -8,8 +8,8 @@
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
     "lodash": "^4.17.21",
-    "@ninetailed/experience.js": "3.0.1-beta.3",
-    "@ninetailed/experience.js-shared": "3.0.1-beta.3",
+    "@ninetailed/experience.js": "3.0.1-beta.4",
+    "@ninetailed/experience.js-shared": "3.0.1-beta.4",
     "ts-toolbelt": "^9.6.0",
     "diary": "^0.3.1",
     "zod": "^3.18.0",