fix(clerk-js): Cache active sessions with useFetch (clerk#2733)

* chore(repo): Upgrade next version on playground

* fix(clerk-js): Don't refetch sessions on every page visit

* chore(clerk-js): Handler arrays in `useFetch`

* chore(clerk-js): Clear cache between tests

---------

Co-authored-by: panteliselef <panteliselef@outlook.com>

Author: desiprisg

.changeset/ten-dryers-share.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -1,11 +1,9 @@
 import { useSession, useUser } from '@clerk/shared/react';
 import type { SessionWithActivitiesResource } from '@clerk/types';
-import React from 'react';
 
 import { Badge, Col, descriptors, Flex, Icon, localizationKeys, Text, useLocalizations } from '../../customizables';
 import { FullHeightLoader, ProfileSection, ThreeDotsMenu } from '../../elements';
-import { Action } from '../../elements/Action';
-import { useLoadingStatus } from '../../hooks';
+import { useFetch, useLoadingStatus } from '../../hooks';
 import { DeviceLaptop, DeviceMobile } from '../../icons';
 import { mqu, type PropsOfComponent } from '../../styledSystem';
 import { getRelativeToNowDateKey } from '../../utils';
@@ -14,11 +12,8 @@ import { currentSessionFirst } from './utils';
 export const ActiveDevicesSection = () => {
   const { user } = useUser();
   const { session } = useSession();
-  const [sessionsWithActivities, setSessionsWithActivities] = React.useState<SessionWithActivitiesResource[]>([]);
 
-  React.useEffect(() => {
-    void user?.getSessions().then(sa => setSessionsWithActivities(sa));
-  }, [user]);
+  const { data: sessions, isLoading } = useFetch(user?.getSessions, 'user-sessions');
 
   return (
     <ProfileSection.Root
@@ -27,20 +22,22 @@ export const ActiveDevicesSection = () => {
       id='activeDevices'
     >
       <ProfileSection.ItemList id='activeDevices'>
-        {!sessionsWithActivities.length && <FullHeightLoader />}
-        {!!sessionsWithActivities.length &&
-          sessionsWithActivities.sort(currentSessionFirst(session!.id)).map(sa => (
-            <DeviceAccordion
+        {isLoading ? (
+          <FullHeightLoader />
+        ) : (
+          sessions?.sort(currentSessionFirst(session!.id)).map(sa => (
+            <DeviceItem
               key={sa.id}
               session={sa}
             />
-          ))}
+          ))
+        )}
       </ProfileSection.ItemList>
     </ProfileSection.Root>
   );
 };
 
-const DeviceAccordion = ({ session }: { session: SessionWithActivitiesResource }) => {
+const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) => {
   const isCurrent = useSession().session?.id === session.id;
   const status = useLoadingStatus();
   const revoke = async () => {
@@ -52,30 +49,26 @@ const DeviceAccordion = ({ session }: { session: SessionWithActivitiesResource }
   };
 
   return (
-    <Action.Root>
-      <Action.Closed value=''>
-        <ProfileSection.Item
-          id='activeDevices'
-          elementDescriptor={descriptors.activeDeviceListItem}
-          elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
-          sx={t => ({
-            alignItems: 'flex-start',
-            padding: `${t.space.$2} ${t.space.$4}`,
-            marginLeft: `-${t.space.$4}`,
-            borderRadius: t.radii.$md,
-            ':hover': { backgroundColor: t.colors.$blackAlpha50 },
-          })}
-        >
-          {status.isLoading && <FullHeightLoader />}
-          {!status.isLoading && (
-            <>
-              <DeviceInfo session={session} />
-              {!isCurrent && <ActiveDeviceMenu revoke={revoke} />}
-            </>
-          )}
-        </ProfileSection.Item>
-      </Action.Closed>
-    </Action.Root>
+    <ProfileSection.Item
+      id='activeDevices'
+      elementDescriptor={descriptors.activeDeviceListItem}
+      elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
+      sx={t => ({
+        alignItems: 'flex-start',
+        padding: `${t.space.$2} ${t.space.$4}`,
+        marginLeft: `-${t.space.$4}`,
+        borderRadius: t.radii.$md,
+        ':hover': { backgroundColor: t.colors.$blackAlpha50 },
+      })}
+    >
+      {status.isLoading && <FullHeightLoader />}
+      {!status.isLoading && (
+        <>
+          <DeviceInfo session={session} />
+          {!isCurrent && <ActiveDeviceMenu revoke={revoke} />}
+        </>
+      )}
+    </ProfileSection.Item>
   );
 };
 

packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx

@@ -3,12 +3,20 @@ import { describe, it } from '@jest/globals';
 import { within } from '@testing-library/dom';
 
 import { render, screen, waitFor } from '../../../../testUtils';
+import { clearFetchCache } from '../../../hooks';
 import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SecurityPage } from '../SecurityPage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
 
 describe('SecurityPage', () => {
+  /**
+   * `<SecurityPage/>` internally uses useFetch which caches the results, be sure to clear the cache before each test
+   */
+  beforeEach(() => {
+    clearFetchCache();
+  });
+
   it('renders the component', async () => {
     const { wrapper, fixtures } = await createFixtures(f => {
       f.withUser({ email_addresses: ['test@clerk.com'] });

packages/clerk-js/src/ui/hooks/useFetch.ts

@@ -31,7 +31,7 @@ export const clearFetchCache = () => {
   requestCache = new Map<string, State>();
 };
 
-const serialize = (obj: unknown) => JSON.stringify(obj);
+const serialize = (key: unknown) => (typeof key === 'string' ? key : JSON.stringify(key));
 
 const useCache = <K = any, V = any>(
   key: K,
@@ -94,7 +94,7 @@ export const useFetch = <K, T>(
     fetcherRef.current!(params)
       .then(result => {
         if (typeof result !== 'undefined') {
-          const data = typeof result === 'object' ? { ...result } : result;
+          const data = Array.isArray(result) ? result : typeof result === 'object' ? { ...result } : result;
           setCache({
             data,
             isLoading: false,

playground/nextjs/package.json

@@ -18,7 +18,7 @@
     "@clerk/shared": "file:.yalc/@clerk/shared",
     "@clerk/themes": "file:.yalc/@clerk/themes",
     "@clerk/types": "file:.yalc/@clerk/types",
-    "next": "^13.5.6",
+    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },