@ninetailed/experience.js-react 7.11.0 → 7.11.1

package/index.cjs.js

@@ -99,32 +99,49 @@ function __rest(s, e) {
     return t;
 }
 
+function formatProfileForHook(profile) {
+  const profileStateWithoutExperiences = __rest(profile, ["experiences"]);
+  return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
+    loading: profile.status === 'loading'
+  });
+}
+/**
+ * Custom hook that provides access to the Ninetailed profile state
+ * with the 'experiences' property removed to prevent unnecessary re-renders.
+ *
+ * This hook handles profile state changes efficiently by:
+ * 1. Only updating state when actual changes occur
+ * 2. Removing the large 'experiences' object from the state
+ * 3. Properly cleaning up subscriptions when components unmount
+ *
+ * @returns The profile state without the 'experiences' property
+ */
 const useProfile = () => {
   const ninetailed = useNinetailed();
-  const [profileState, setProfileState] = React.useState(ninetailed.profileState);
-  const 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.
-   */
+  const [strippedProfileState, setStrippedProfileState] = React.useState(formatProfileForHook(ninetailed.profileState));
+  // Reference to track the previous profile state for comparison
+  const profileStateRef = React.useRef(ninetailed.profileState);
   React.useEffect(() => {
-    ninetailed.onProfileChange(profileState => {
-      if (radash.isEqual(profileState, profileStateRef.current)) {
-        experience_jsShared.logger.debug('Profile State Did Not Change', profileState);
+    const unsubscribe = ninetailed.onProfileChange(changedProfileState => {
+      // Skip update if the profile hasn't actually changed
+      // Here we compare the entire profile including experiences and changes
+      if (radash.isEqual(changedProfileState, profileStateRef.current)) {
+        experience_jsShared.logger.debug('Profile State Did Not Change', changedProfileState);
         return;
-      } else {
-        setProfileState(profileState);
-        profileStateRef.current = profileState;
-        experience_jsShared.logger.debug('Profile State Changed', profileState);
       }
+      profileStateRef.current = changedProfileState;
+      experience_jsShared.logger.debug('Profile State Changed', changedProfileState);
+      setStrippedProfileState(formatProfileForHook(changedProfileState));
     });
+    // Clean up subscription when component unmounts
+    return () => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+        experience_jsShared.logger.debug('Unsubscribed from profile state changes');
+      }
+    };
   }, []);
-  const profileStateWithoutExperiences = __rest(profileState, ["experiences"]);
-  return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
-    loading: profileState.status === 'loading'
-  });
+  return strippedProfileState;
 };
 
 const usePersonalize = (baseline, variants, options = {
@@ -253,8 +270,8 @@ const MergeTag = ({
   fallback
 }) => {
   const {
-    loading,
-    profile
+    profile,
+    loading
   } = useProfile();
   if (loading || !profile) {
     return null;

package/index.esm.js

@@ -77,33 +77,52 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 const _excluded$3 = ["experiences"];
+function formatProfileForHook(profile) {
+  const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profile, _excluded$3);
+  return Object.assign({}, profileStateWithoutExperiences, {
+    loading: profile.status === 'loading'
+  });
+}
+
+/**
+ * Custom hook that provides access to the Ninetailed profile state
+ * with the 'experiences' property removed to prevent unnecessary re-renders.
+ *
+ * This hook handles profile state changes efficiently by:
+ * 1. Only updating state when actual changes occur
+ * 2. Removing the large 'experiences' object from the state
+ * 3. Properly cleaning up subscriptions when components unmount
+ *
+ * @returns The profile state without the 'experiences' property
+ */
 const useProfile = () => {
   const ninetailed = useNinetailed();
-  const [profileState, setProfileState] = useState(ninetailed.profileState);
-  const profileStateRef = useRef({});
+  const [strippedProfileState, setStrippedProfileState] = useState(formatProfileForHook(ninetailed.profileState));
 
-  /**
-   * 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.
-   */
+  // Reference to track the previous profile state for comparison
+  const profileStateRef = useRef(ninetailed.profileState);
   useEffect(() => {
-    ninetailed.onProfileChange(profileState => {
-      if (isEqual(profileState, profileStateRef.current)) {
-        logger.debug('Profile State Did Not Change', profileState);
+    const unsubscribe = ninetailed.onProfileChange(changedProfileState => {
+      // Skip update if the profile hasn't actually changed
+      // Here we compare the entire profile including experiences and changes
+      if (isEqual(changedProfileState, profileStateRef.current)) {
+        logger.debug('Profile State Did Not Change', changedProfileState);
         return;
-      } else {
-        setProfileState(profileState);
-        profileStateRef.current = profileState;
-        logger.debug('Profile State Changed', profileState);
       }
+      profileStateRef.current = changedProfileState;
+      logger.debug('Profile State Changed', changedProfileState);
+      setStrippedProfileState(formatProfileForHook(changedProfileState));
     });
+
+    // Clean up subscription when component unmounts
+    return () => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+        logger.debug('Unsubscribed from profile state changes');
+      }
+    };
   }, []);
-  const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profileState, _excluded$3);
-  return Object.assign({}, profileStateWithoutExperiences, {
-    loading: profileState.status === 'loading'
-  });
+  return strippedProfileState;
 };
 
 const usePersonalize = (baseline, variants, options = {
@@ -232,8 +251,8 @@ const MergeTag = ({
   fallback
 }) => {
   const {
-    loading,
-    profile
+    profile,
+    loading
   } = useProfile();
   if (loading || !profile) {
     return null;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.11.0",
+  "version": "7.11.1",
   "description": "Ninetailed SDK for React",
   "dependencies": {
-    "@ninetailed/experience.js": "7.11.0",
-    "@ninetailed/experience.js-shared": "7.11.0",
-    "@ninetailed/experience.js-plugin-analytics": "7.11.0",
+    "@ninetailed/experience.js": "7.11.1",
+    "@ninetailed/experience.js-shared": "7.11.1",
+    "@ninetailed/experience.js-plugin-analytics": "7.11.1",
     "radash": "10.9.0",
     "react-is": "18.2.0"
   },

package/src/lib/useProfile.d.ts

@@ -1,53 +1,17 @@
-export declare const useProfile: () => {
+import { ProfileState } from '@ninetailed/experience.js';
+type UseProfileHookResult = Omit<ProfileState, 'experiences'> & {
     loading: boolean;
-    from: "api" | "hydrated";
-    status: "loading";
-    profile: null;
-    error: null;
-} | {
-    loading: boolean;
-    from: "api" | "hydrated";
-    status: "success";
-    profile: {
-        id: string;
-        stableId: string;
-        random: number;
-        audiences: string[];
-        traits: import("@ninetailed/experience.js-shared").Properties;
-        location: {
-            coordinates?: {
-                latitude: number;
-                longitude: number;
-            } | undefined;
-            city?: string | undefined;
-            postalCode?: string | undefined;
-            region?: string | undefined;
-            regionCode?: string | undefined;
-            country?: string | undefined;
-            countryCode?: string | undefined;
-            continent?: string | undefined;
-            timezone?: string | undefined;
-        };
-        session: {
-            id: string;
-            isReturningVisitor: boolean;
-            landingPage: {
-                path: string;
-                url: string;
-                query: Record<string, string>;
-                referrer: string;
-                search: string;
-            };
-            count: number;
-            activeSessionLength: number;
-            averageSessionLength: number;
-        };
-    };
-    error: null;
-} | {
-    loading: boolean;
-    from: "api" | "hydrated";
-    status: "error";
-    profile: null;
-    error: Error;
 };
+/**
+ * Custom hook that provides access to the Ninetailed profile state
+ * with the 'experiences' property removed to prevent unnecessary re-renders.
+ *
+ * This hook handles profile state changes efficiently by:
+ * 1. Only updating state when actual changes occur
+ * 2. Removing the large 'experiences' object from the state
+ * 3. Properly cleaning up subscriptions when components unmount
+ *
+ * @returns The profile state without the 'experiences' property
+ */
+export declare const useProfile: () => UseProfileHookResult;
+export {};