Fix session data update

jest.config.ts

@@ -12,6 +12,9 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: 'test/tsconfig.json',
+      diagnostics: {
+        ignoreCodes: ['TS151001'],
+      },
     },
   },
   moduleDirectories: ['node_modules', 'src', './'],

package.json

@@ -29,6 +29,7 @@
     "react": "^16.8.0 || ^17.0.0"
   },
   "dependencies": {
+    "fast-deep-equal": "^3.1.3",
     "luxon": "^1.28.0",
     "web-session": "^0.2.2"
   },

src/helpers.ts

@@ -0,0 +1,14 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+import * as isDeepEqualReact from 'fast-deep-equal/react';
+
+export function useDeepCompareEffect<T extends DependencyList>(effect: EffectCallback, deps: T) {
+  const ref = useRef<T | undefined>(undefined);
+
+  /* istanbul ignore else */
+  if (!ref.current || !isDeepEqualReact(deps, ref.current)) {
+    ref.current = deps;
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, ref.current);
+}

src/index.tsx

@@ -1,7 +1,9 @@
-import { ReactNode, useEffect, useRef } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { createBrowserHistory, History } from 'history';
 import WebSession, { AnyObject, Options, Session } from 'web-session';
 
+import { useDeepCompareEffect } from './helpers';
+
 interface Props extends Partial<Options> {
   children?: ReactNode | ((session: Session, history: History) => ReactNode);
   data?: AnyObject;
@@ -22,10 +24,11 @@ function ReactWebSession(props: Props) {
     name = 'WebSessionData',
     timezone = 'UTC',
   } = props;
+  const [sessionData, setSessionData] = useState(data);
 
-  const setData = useRef(() => {
-    webSession.update(data);
-  });
+  const setData = useCallback(() => {
+    updateSession(sessionData);
+  }, [sessionData]);
 
   useEffect(() => {
     webSession.init({
@@ -34,16 +37,20 @@ function ReactWebSession(props: Props) {
       name,
       timezone,
     });
-    setData.current();
+    setData();
 
     const removeListener = history.listen(() => {
-      setData.current();
+      setData();
     });
 
     return () => {
       removeListener();
     };
-  }, [callback, duration, history, name, timezone]);
+  }, [callback, duration, history, name, setData, timezone]);
+
+  useDeepCompareEffect(() => {
+    setSessionData(data);
+  }, [data]);
 
   if (typeof children === 'function') {
     return children(webSession.session, history);

test/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../tsconfig",
   "compilerOptions": {
-    "esModuleInterop": true,
     "module": "esnext"
   },
   "include": ["**/*"]