fix(clerk-js): Only render active sessions in devices section (#3497)

Author: desiprisg

.changeset/perfect-penguins-swim.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Only render active sessions in the active devices section. Fixes the bug where a device with no information would render upon revoking.

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

@@ -28,12 +28,17 @@ export const ActiveDevicesSection = () => {
         {isLoading ? (
           <FullHeightLoader />
         ) : (
-          sessions?.sort(currentSessionFirst(session!.id)).map(sa => (
-            <DeviceItem
-              key={sa.id}
-              session={sa}
-            />
-          ))
+          sessions?.sort(currentSessionFirst(session!.id)).map(sa => {
+            if (sa.status !== 'active') {
+              return null;
+            }
+            return (
+              <DeviceItem
+                key={sa.id}
+                session={sa}
+              />
+            );
+          })
         )}
       </ProfileSection.ItemList>
     </ProfileSection.Root>

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

@@ -78,10 +78,10 @@ export const useFetch = <K, T>(
 
   useEffect(() => {
     const fetcherMissing = !fetcherRef.current;
-    const isCacheStale = Date.now() - (getCache()?.cachedAt || 0) < staleTime;
+    const isCacheStale = Date.now() - (getCache()?.cachedAt || 0) >= staleTime;
     const isRequestOnGoing = getCache()?.isValidating;
 
-    if (fetcherMissing || isCacheStale || isRequestOnGoing) {
+    if (fetcherMissing || !isCacheStale || isRequestOnGoing) {
       return;
     }