enhance: useDLE() deps list more specific to avoid extraneous re-comp…

…utation

.changeset/fifty-baboons-grab.md

@@ -0,0 +1,5 @@
+---
+'@data-client/react': patch
+---
+
+useDLE() deps list more specific to avoid extraneous re-computation

docs/core/api/DataProvider.md

@@ -40,10 +40,10 @@ export interface State<T> {
   readonly entities: {
     readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
   };
-  readonly indexes: NormalizedIndex;
   readonly endpoints: {
     readonly [key: string]: unknown | PK[] | PK | undefined;
   };
+  readonly indexes: NormalizedIndex;
   readonly meta: {
     readonly [key: string]: {
       readonly date: number;
@@ -116,7 +116,7 @@ const RealApp = (
 
 <img src="/img/client-logo.svg" style={{float:'right',width:'40px'}} />
 
-In development, a small button will appear that gives easy access to browser devtools if
+In development, a small button will appear that gives easy access to [browser devtools](../getting-started/debugging.md) if
 installed. This option configures where it shows up, or if null will disable it altogether.
 
 `'bottom-right' | 'bottom-left' | 'top-right'| 'top-left' | null` = `'bottom-right'`

packages/react/src/hooks/useCache.ts

@@ -65,11 +65,12 @@ export default function useCache<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [expiresAt, controller, key, forceFetch, state.lastReset]);
 
-  const wouldSuspend = expiryStatus !== ExpiryStatus.Valid && expired;
+  // fully "valid" data will not suspend/loading even if it is not fresh
+  const loading = expiryStatus !== ExpiryStatus.Valid && expired;
 
   return useMemo(() => {
     // if useSuspense() would suspend, don't include entities from cache
-    if (wouldSuspend) {
+    if (loading) {
       if (!endpoint.schema) return undefined;
       return controller.getResponse(endpoint, ...args, {
         ...state,
@@ -80,6 +81,6 @@ export default function useCache<
     // key substitutes args + endpoint
     // we only need cacheResults, as entities are not used in this case
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, controller, data, wouldSuspend, cacheResults]);
+  }, [key, controller, data, loading, cacheResults]);
   /*********************** end block *****************************/
 }

packages/react/src/hooks/useDLE.native.ts

@@ -77,7 +77,8 @@ export default function useDLE<
   const controller = useController();
 
   const key = args[0] !== null ? endpoint.key(...args) : '';
-  const cacheResults = args[0] !== null && state.endpoints[key];
+  const cacheResults = key && state.endpoints[key];
+  const meta = state.meta[key];
 
   // Compute denormalized value
   // eslint-disable-next-line prefer-const
@@ -89,12 +90,10 @@ export default function useDLE<
     state.indexes,
     state.entities,
     state.entityMeta,
-    state.meta,
+    meta,
     key,
   ]);
 
-  const error = controller.getError(endpoint, ...args, state);
-
   // If we are hard invalid we must fetch regardless of triggering or staleness
   const forceFetch = expiryStatus === ExpiryStatus.Invalid;
 
@@ -132,8 +131,11 @@ export default function useDLE<
     }
     return data;
     // key substitutes args + endpoint
+    // we only need cacheResults, as entities are not used in this case
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, controller, data, loading, state]);
+  }, [key, controller, data, loading, cacheResults]);
+
+  const error = controller.getError(endpoint, ...args, state);
 
   return {
     data,

packages/react/src/hooks/useDLE.ts

@@ -12,7 +12,7 @@ import { ExpiryStatus } from '@data-client/core';
 import { useMemo } from 'react';
 
 import useCacheState from './useCacheState.js';
-import useController from '../hooks/useController.js';
+import useController from './useController.js';
 
 type SchemaReturn<S extends Schema | undefined> =
   | {
@@ -75,7 +75,8 @@ export default function useDLE<
   const controller = useController();
 
   const key = args[0] !== null ? endpoint.key(...args) : '';
-  const cacheResults = args[0] !== null && state.endpoints[key];
+  const cacheResults = key && state.endpoints[key];
+  const meta = state.meta[key];
 
   // Compute denormalized value
   // eslint-disable-next-line prefer-const
@@ -87,12 +88,10 @@ export default function useDLE<
     state.indexes,
     state.entities,
     state.entityMeta,
-    state.meta,
+    meta,
     key,
   ]);
 
-  const error = controller.getError(endpoint, ...args, state);
-
   // If we are hard invalid we must fetch regardless of triggering or staleness
   const forceFetch = expiryStatus === ExpiryStatus.Invalid;
 
@@ -119,8 +118,11 @@ export default function useDLE<
     }
     return data;
     // key substitutes args + endpoint
+    // we only need cacheResults, as entities are not used in this case
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, controller, data, loading, state]);
+  }, [key, controller, data, loading, cacheResults]);
+
+  const error = controller.getError(endpoint, ...args, state);
 
   return {
     data,