@dr.pogodin/react-global-state 0.15.1 → 0.16.0

package/src/useAsyncCollection.ts

@@ -1,114 +1,405 @@
 /**
- * Loads and uses an item in an async collection.
+ * Loads and uses item(s) in an async collection.
  */
 
+import { useEffect, useRef } from 'react';
+import { v4 as uuid } from 'uuid';
+
+import GlobalState from './GlobalState';
+import { getGlobalState } from './GlobalStateProvider';
+
 import {
+  type AsyncDataEnvelopeT,
+  type AsyncDataReloaderT,
   type DataInEnvelopeAtPathT,
+  type OperationIdT,
   type UseAsyncDataOptionsT,
   type UseAsyncDataResT,
-  useAsyncData,
+  DEFAULT_MAXAGE,
+  load,
+  newAsyncDataEnvelope,
 } from './useAsyncData';
 
-import { type ForceT, type LockT, type TypeLock } from './utils';
+import useGlobalState from './useGlobalState';
+
+import {
+  type ForceT,
+  type LockT,
+  type TypeLock,
+  isDebugMode,
+} from './utils';
+
+export type AsyncCollectionLoaderT<
+  DataT,
+  IdT extends number | string = number | string,
+> =
+  (id: IdT, oldData: null | DataT, meta: {
+    isAborted: () => boolean;
+    oldDataTimestamp: number;
+  }) => DataT | Promise<DataT | null> | null;
+
+export type AsyncCollectionReloaderT<
+  DataT,
+  IdT extends number | string = number | string,
+>
+  = (loader?: AsyncCollectionLoaderT<DataT, IdT>) => Promise<void>;
+
+type CollectionItemT<DataT> = {
+  data: DataT | null;
+  loading: boolean;
+  timestamp: number;
+};
+
+export type UseAsyncCollectionResT<
+  DataT,
+  IdT extends number | string = number | string,
+> = {
+  items: {
+    [id in IdT]: CollectionItemT<DataT>;
+  }
+  loading: boolean;
+  reload: AsyncCollectionReloaderT<DataT, IdT>;
+  timestamp: number;
+};
 
-export type AsyncCollectionLoaderT<DataT> =
-  (id: string, oldData: null | DataT) => DataT | Promise<DataT>;
+type HeapT<
+  DataT,
+  IdT extends number | string,
+> = {
+  // Note: these heap fields are necessary to make reload() a stable function.
+  globalState?: GlobalState<unknown>;
+  ids?: IdT[];
+  path?: null | string;
+  loader?: AsyncCollectionLoaderT<DataT, IdT>;
+  reload?: AsyncCollectionReloaderT<DataT, IdT>;
+  reloadD?: AsyncDataReloaderT<DataT>;
+};
 
 /**
- * Resolves and stores at the given `path` of global state elements of
- * an asynchronous data collection. In other words, it is an auxiliar wrapper
- * around {@link useAsyncData}, which uses a loader which resolves to different
- * data, based on ID argument passed in, and stores data fetched for different
- * IDs in the state.
- * @param id ID of the collection item to load & use.
- * @param path The global state path where entire collection should be
- *  stored.
- * @param loader A loader function, which takes an
- * ID of data to load, and resolves to the corresponding data.
- * @param options Additional options.
- * @param options.deps An array of dependencies, which trigger
- * data reload when changed. Given dependency changes are watched shallowly
- * (similarly to the standard React's
- * [useEffect()](https://reactjs.org/docs/hooks-reference.html#useeffect)).
- * @param options.noSSR If `true`, this hook won't load data during
- * server-side rendering.
- * @param options.garbageCollectAge The maximum age of data
- * (in milliseconds), after which they are dropped from the state when the last
- * component referencing them via `useAsyncData()` hook unmounts. Defaults to
- * `maxage` option value.
- * @param options.maxage The maximum age of
- * data (in milliseconds) acceptable to the hook's caller. If loaded data are
- * older than this value, `null` is returned instead. Defaults to 5 minutes.
- * @param options.refreshAge The maximum age of data
- * (in milliseconds), after which their refreshment will be triggered when
- * any component referencing them via `useAsyncData()` hook (re-)renders.
- * Defaults to `maxage` value.
- * @return Returns an object with three fields: `data` holds the actual result of
- * last `loader` invokation, if any, and if satisfies `maxage` limit; `loading`
- * is a boolean flag, which is `true` if data are being loaded (the hook is
- * waiting for `loader` function resolution); `timestamp` (in milliseconds)
- * is Unix timestamp of related data currently loaded into the global state.
- *
- * Note that loaded data, if any, are stored at the given `path` of global state
- * along with related meta-information, using slightly different state segment
- * structure (see {@link AsyncDataEnvelope}). That segment of the global state
- * can be accessed, and even modified using other hooks,
- * _e.g._ {@link useGlobalState}, but doing so you may interfere with related
- * `useAsyncData()` hooks logic.
+ * Resolves and stores at the given `path` of the global state elements of
+ * an asynchronous data collection.
  */
 
 function useAsyncCollection<
   StateT,
   PathT extends null | string | undefined,
-  IdT extends string,
+  IdT extends number | string,
 
   DataT extends DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`> =
   DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>,
 >(
   id: IdT,
   path: PathT,
-  loader: AsyncCollectionLoaderT<DataT>,
+  loader: AsyncCollectionLoaderT<DataT, IdT>,
   options?: UseAsyncDataOptionsT,
 ): UseAsyncDataResT<DataT>;
 
 function useAsyncCollection<
   Forced extends ForceT | LockT = LockT,
   DataT = unknown,
+  IdT extends number | string = number | string,
 >(
-  id: string,
+  id: IdT,
   path: null | string | undefined,
-  loader: AsyncCollectionLoaderT<TypeLock<Forced, void, DataT>>,
+  loader: AsyncCollectionLoaderT<TypeLock<Forced, void, DataT>, IdT>,
   options?: UseAsyncDataOptionsT,
 ): UseAsyncDataResT<TypeLock<Forced, void, DataT>>;
 
-function useAsyncCollection<DataT>(
-  id: string,
+function useAsyncCollection<
+  StateT,
+  PathT extends null | string | undefined,
+  IdT extends number | string,
+
+  DataT extends DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`> =
+  DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>,
+>(
+  id: IdT[],
+  path: PathT,
+  loader: AsyncCollectionLoaderT<DataT, IdT>,
+  options?: UseAsyncDataOptionsT,
+): UseAsyncCollectionResT<DataT, IdT>;
+
+function useAsyncCollection<
+  Forced extends ForceT | LockT = LockT,
+  DataT = unknown,
+  IdT extends number | string = number | string,
+>(
+  id: IdT[],
   path: null | string | undefined,
-  loader: AsyncCollectionLoaderT<DataT>,
+  loader: AsyncCollectionLoaderT<TypeLock<Forced, void, DataT>, IdT>,
+  options?: UseAsyncDataOptionsT,
+): UseAsyncCollectionResT<DataT, IdT>;
+
+// TODO: This is largely similar to useAsyncData() logic, just more generic.
+// Perhaps, a bunch of logic blocks can be split into stand-alone functions,
+// and reused in both hooks.
+function useAsyncCollection<
+  DataT,
+  IdT extends number | string,
+>(
+  idOrIds: IdT | IdT[],
+  path: null | string | undefined,
+  loader: AsyncCollectionLoaderT<DataT, IdT>,
   options: UseAsyncDataOptionsT = {},
-): UseAsyncDataResT<DataT> {
-  const itemPath = path ? `${path}.${id}` : id;
-  return useAsyncData<ForceT, DataT>(
-    itemPath,
-    (oldData: null | DataT) => loader(id, oldData),
-    options,
-  );
+): UseAsyncDataResT<DataT> | UseAsyncCollectionResT<DataT, IdT> {
+  const ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+
+  const maxage: number = options.maxage ?? DEFAULT_MAXAGE;
+  const refreshAge: number = options.refreshAge ?? maxage;
+  const garbageCollectAge: number = options.garbageCollectAge ?? maxage;
+
+  // To avoid unnecessary work if consumer passes down the same IDs
+  // in an unstable order.
+  // TODO: Should we also filter out any duplicates? Or just assume consumer
+  // knows what he is doing, and won't place duplicates into IDs array?e
+  ids.sort();
+
+  const globalState = getGlobalState();
+
+  const { current: heap } = useRef<HeapT<DataT, IdT>>({});
+
+  heap.globalState = globalState;
+  heap.ids = ids;
+  heap.path = path;
+  heap.loader = loader;
+
+  if (!heap.reload) {
+    heap.reload = async (customLoader?: AsyncCollectionLoaderT<DataT, IdT>) => {
+      const localLoader = customLoader || heap.loader;
+      if (!localLoader || !heap.globalState || !heap.ids) {
+        throw Error('Internal error');
+      }
+
+      for (let i = 0; i < heap.ids.length; ++i) {
+        const id = heap.ids[i]!;
+        const itemPath = heap.path ? `${heap.path}.${id}` : `${id}`;
+
+        // eslint-disable-next-line no-await-in-loop
+        await load(
+          itemPath,
+          (oldData: DataT | null, meta) => localLoader(id, oldData, meta),
+          heap.globalState,
+        );
+      }
+    };
+  }
+
+  if (!Array.isArray(idOrIds)) {
+    heap.reloadD = (customLoader) => heap.reload!(
+      customLoader && ((id, ...args) => customLoader(...args)),
+    );
+  }
+
+  // Server-side logic.
+  if (globalState.ssrContext && !options.noSSR) {
+    const operationId: OperationIdT = `S${uuid()}`;
+    for (let i = 0; i < ids.length; ++i) {
+      const id = ids[i]!;
+      const itemPath = path ? `${path}.${id}` : `${id}`;
+      const state = globalState.get<ForceT, AsyncDataEnvelopeT<DataT>>(itemPath, {
+        initialValue: newAsyncDataEnvelope<DataT>(),
+      });
+      if (!state.timestamp && !state.operationId) {
+        globalState.ssrContext.pending.push(
+          load(itemPath, (...args) => loader(id, ...args), globalState, {
+            data: state.data,
+            timestamp: state.timestamp,
+          }, operationId),
+        );
+      }
+    }
+
+  // Client-side logic.
+  } else {
+    // Reference-counting & garbage collection.
+
+    // TODO: Violation of rules of hooks is fine here,
+    // but perhaps it can be refactored to avoid the need for it.
+    useEffect(() => { // eslint-disable-line react-hooks/rules-of-hooks
+      for (let i = 0; i < ids.length; ++i) {
+        const id = ids[i];
+        const itemPath = path ? `${path}.${id}` : `${id}`;
+        const state = globalState.get<ForceT, AsyncDataEnvelopeT<DataT>>(
+          itemPath,
+          { initialValue: newAsyncDataEnvelope() },
+        );
+
+        const numRefsPath = itemPath ? `${itemPath}.numRefs` : 'numRefs';
+        globalState.set<ForceT, number>(numRefsPath, state.numRefs + 1);
+      }
+
+      return () => {
+        for (let i = 0; i < ids.length; ++i) {
+          const id = ids[i];
+          const itemPath = path ? `${path}.${id}` : `${id}`;
+          const state2: AsyncDataEnvelopeT<DataT> = globalState.get<
+          ForceT, AsyncDataEnvelopeT<DataT>
+          >(itemPath);
+          if (
+            state2.numRefs === 1
+            && garbageCollectAge < Date.now() - state2.timestamp
+          ) {
+            if (process.env.NODE_ENV !== 'production' && isDebugMode()) {
+              /* eslint-disable no-console */
+              console.log(
+                `ReactGlobalState - useAsyncCollection garbage collected at path ${
+                  itemPath || ''
+                }`,
+              );
+              /* eslint-enable no-console */
+            }
+            globalState.dropDependencies(itemPath || '');
+            globalState.set<ForceT, AsyncDataEnvelopeT<DataT>>(itemPath, {
+              ...state2,
+              data: null,
+              numRefs: 0,
+              timestamp: 0,
+            });
+          } else {
+            const numRefsPath = itemPath ? `${itemPath}.numRefs` : 'numRefs';
+            globalState.set<ForceT, number>(numRefsPath, state2.numRefs - 1);
+          }
+        }
+      };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [garbageCollectAge, globalState, path, ...ids]);
+
+    // NOTE: a bunch of Rules of Hooks ignored belows because in our very
+    // special case the otherwise wrong behavior is actually what we need.
+
+    // Data loading and refreshing.
+    const loadTriggeredForIds = new Set<IdT>();
+    useEffect(() => { // eslint-disable-line react-hooks/rules-of-hooks
+      (async () => {
+        for (let i = 0; i < ids.length; ++i) {
+          const id = ids[i]!;
+          const itemPath = path ? `${path}.${id}` : `${id}`;
+          const state2: AsyncDataEnvelopeT<DataT> = globalState.get<
+          ForceT, AsyncDataEnvelopeT<DataT>>(itemPath);
+
+          const { deps } = options;
+          if (
+            (deps && globalState.hasChangedDependencies(itemPath, deps))
+            || (
+              refreshAge < Date.now() - state2.timestamp
+              && (!state2.operationId || state2.operationId.charAt(0) === 'S')
+            )
+          ) {
+            if (!deps) globalState.dropDependencies(itemPath);
+            loadTriggeredForIds.add(id);
+            // eslint-disable-next-line no-await-in-loop
+            await load(itemPath, (...args) => loader(id, ...args), globalState, {
+              data: state2.data,
+              timestamp: state2.timestamp,
+            });
+          }
+        }
+      })();
+    });
+
+    useEffect(() => { // eslint-disable-line react-hooks/rules-of-hooks
+      (async () => {
+        const { deps } = options;
+        for (let i = 0; i < ids.length; ++i) {
+          const id = ids[i]!;
+          const itemPath = path ? `${path}.${id}` : `${id}`;
+          if (
+            deps
+            && globalState.hasChangedDependencies(itemPath || '', deps)
+            && !loadTriggeredForIds.has(id)
+          ) {
+            // eslint-disable-next-line no-await-in-loop
+            await load(
+              itemPath,
+              (oldData: null | DataT, meta) => loader(id, oldData, meta),
+              globalState,
+            );
+          }
+        }
+      })();
+
+    // Here we need to default to empty array, so that this hook is re-evaluated
+    // only when dependencies specified in options change, and it should not be
+    // re-evaluated at all if no `deps` option is used.
+    }, options.deps || []); // eslint-disable-line react-hooks/exhaustive-deps
+  }
+
+  const [localState] = useGlobalState<
+  ForceT, { [id: string]: AsyncDataEnvelopeT<DataT> }
+  >(path, {});
+
+  if (!Array.isArray(idOrIds)) {
+    const e = localState[idOrIds];
+    const timestamp = e?.timestamp ?? 0;
+    return {
+      data: maxage < Date.now() - timestamp ? null : (e?.data ?? null),
+      loading: !!e?.operationId,
+      reload: heap.reloadD!,
+      timestamp,
+    };
+  }
+
+  const res: UseAsyncCollectionResT<DataT, IdT> = {
+    items: {} as Record<IdT, CollectionItemT<DataT>>,
+    loading: false,
+    reload: heap.reload,
+    timestamp: Number.MAX_VALUE,
+  };
+
+  for (let i = 0; i < ids.length; ++i) {
+    const id = ids[i]!;
+    const e = localState[id];
+    const loading = !!e?.operationId;
+    const timestamp = e?.timestamp ?? 0;
+
+    res.items[id] = {
+      data: maxage < Date.now() - timestamp ? null : (e?.data ?? null),
+      loading,
+      timestamp,
+    };
+    res.loading ||= loading;
+    if (res.timestamp > timestamp) res.timestamp = timestamp;
+  }
+
+  return res;
 }
 
 export default useAsyncCollection;
 
 export interface UseAsyncCollectionI<StateT> {
-  <PathT extends null | string | undefined, IdT extends string>(
+  <PathT extends null | string | undefined, IdT extends number | string>(
     id: IdT,
     path: PathT,
-    loader: AsyncCollectionLoaderT<DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>>,
+    loader: AsyncCollectionLoaderT<DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>, IdT>,
     options?: UseAsyncDataOptionsT,
   ): UseAsyncDataResT<DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>>;
 
-  <Forced extends ForceT | LockT = LockT, DataT = unknown>(
-    id: string,
+  <
+    Forced extends ForceT | LockT = LockT,
+    DataT = unknown,
+    IdT extends number | string = number | string,
+  >(
+    id: IdT,
     path: null | string | undefined,
-    loader: AsyncCollectionLoaderT<TypeLock<Forced, void, DataT>>,
+    loader: AsyncCollectionLoaderT<TypeLock<Forced, void, DataT>, IdT>,
     options?: UseAsyncDataOptionsT,
   ): UseAsyncDataResT<TypeLock<Forced, void, DataT>>;
+
+  <PathT extends null | string | undefined, IdT extends number | string>(
+    id: IdT[],
+    path: PathT,
+    loader: AsyncCollectionLoaderT<DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>, IdT>,
+    options?: UseAsyncDataOptionsT,
+  ): UseAsyncCollectionResT<DataInEnvelopeAtPathT<StateT, `${PathT}.${IdT}`>, IdT>;
+
+  <
+    Forced extends ForceT | LockT = LockT,
+    DataT = unknown,
+    IdT extends number | string = number | string,
+  >(
+    id: IdT[],
+    path: null | string | undefined,
+    loader: AsyncCollectionLoaderT<TypeLock<Forced, void, DataT>, IdT>,
+    options?: UseAsyncDataOptionsT,
+  ): UseAsyncCollectionResT<DataT, IdT>;
 }

package/src/useAsyncData.ts

@@ -22,10 +22,13 @@ import {
 import GlobalState from './GlobalState';
 import SsrContext from './SsrContext';
 
-const DEFAULT_MAXAGE = 5 * MIN_MS; // 5 minutes.
+export const DEFAULT_MAXAGE = 5 * MIN_MS; // 5 minutes.
 
 export type AsyncDataLoaderT<DataT>
-= (oldData: null | DataT) => DataT | Promise<DataT>;
+= (oldData: null | DataT, meta: {
+  isAborted: () => boolean;
+  oldDataTimestamp: number;
+}) => DataT | Promise<DataT | null> | null;
 
 export type AsyncDataReloaderT<DataT>
 = (loader?: AsyncDataLoaderT<DataT>) => Promise<void>;
@@ -37,6 +40,8 @@ export type AsyncDataEnvelopeT<DataT> = {
   timestamp: number;
 };
 
+export type OperationIdT = `${'C' | 'S'}${string}`;
+
 export function newAsyncDataEnvelope<DataT>(
   initialData: DataT | null = null,
   { numRefs = 0, timestamp = 0 } = {},
@@ -78,37 +83,49 @@ export type UseAsyncDataResT<DataT> = {
  * @return Resolves once the operation is done.
  * @ignore
  */
-async function load<DataT>(
+export async function load<DataT>(
   path: null | string | undefined,
   loader: AsyncDataLoaderT<DataT>,
   globalState: GlobalState<unknown, SsrContext<unknown>>,
-  oldData: DataT | null,
-  opIdPrefix: 'C' | 'S' = 'C',
+  old?: { data: DataT | null, timestamp: number },
+  operationId: OperationIdT = `C${uuid()}`,
 ): Promise<void> {
   if (process.env.NODE_ENV !== 'production' && isDebugMode()) {
     /* eslint-disable no-console */
     console.log(
-      `ReactGlobalState: useAsyncData data (re-)loading. Path: "${path || ''}"`,
+      `ReactGlobalState: async data (re-)loading. Path: "${path || ''}"`,
     );
     /* eslint-enable no-console */
   }
-  const operationId = opIdPrefix + uuid();
+
   const operationIdPath = path ? `${path}.operationId` : 'operationId';
   globalState.set<ForceT, string>(operationIdPath, operationId);
 
-  const dataOrLoader = loader(
-    oldData || (globalState.get<ForceT, AsyncDataEnvelopeT<DataT>>(path)).data,
-  );
+  let definedOld = old;
+  if (!definedOld) {
+    // TODO: Can we improve the typing, to avoid ForceT?
+    const e = globalState.get<ForceT, AsyncDataEnvelopeT<DataT>>(path);
+    definedOld = { data: e.data, timestamp: e.timestamp };
+  }
+
+  const dataOrPromise = loader(definedOld.data, {
+    isAborted: () => {
+      // TODO: Can we improve the typing, to avoid ForceT?
+      const opid = globalState.get<ForceT, AsyncDataEnvelopeT<DataT>>(path).operationId;
+      return opid !== operationId;
+    },
+    oldDataTimestamp: definedOld.timestamp,
+  });
 
-  const data: DataT = dataOrLoader instanceof Promise
-    ? await dataOrLoader : dataOrLoader;
+  const data: DataT | null = dataOrPromise instanceof Promise
+    ? await dataOrPromise : dataOrPromise;
 
   const state: AsyncDataEnvelopeT<DataT> = globalState.get<ForceT, AsyncDataEnvelopeT<DataT>>(path);
   if (operationId === state.operationId) {
     if (process.env.NODE_ENV !== 'production' && isDebugMode()) {
       /* eslint-disable no-console */
       console.groupCollapsed(
-        `ReactGlobalState: useAsyncData data (re-)loaded. Path: "${
+        `ReactGlobalState: async data (re-)loaded. Path: "${
           path || ''
         }"`,
       );
@@ -131,56 +148,13 @@ async function load<DataT>(
 
 /**
  * Resolves asynchronous data, and stores them at given `path` of global
- * state. When multiple components rely on asynchronous data at the same `path`,
- * the data are resolved once, and reused until their age is within specified
- * bounds. Once the data are stale, the hook allows to refresh them. It also
- * garbage-collects stale data from the global state when the last component
- * relying on them is unmounted.
- * @param path Dot-delimitered state path, where data envelop is
- * stored.
- * @param loader Asynchronous function which resolves (loads)
- * data, which should be stored at the global state `path`. When multiple
- * components
- * use `useAsyncData()` hook for the same `path`, the library assumes that all
- * hook instances are called with the same `loader` (_i.e._ whichever of these
- * loaders is used to resolve async data, the result is acceptable to be reused
- * in all related components).
- * @param options Additional options.
- * @param options.deps An array of dependencies, which trigger
- * data reload when changed. Given dependency changes are watched shallowly
- * (similarly to the standard React's
- * [useEffect()](https://reactjs.org/docs/hooks-reference.html#useeffect)).
- * @param options.noSSR If `true`, this hook won't load data during
- * server-side rendering.
- * @param options.garbageCollectAge The maximum age of data
- * (in milliseconds), after which they are dropped from the state when the last
- * component referencing them via `useAsyncData()` hook unmounts. Defaults to
- * `maxage` option value.
- * @param options.maxage The maximum age of
- * data (in milliseconds) acceptable to the hook's caller. If loaded data are
- * older than this value, `null` is returned instead. Defaults to 5 minutes.
- * @param options.refreshAge The maximum age of data
- * (in milliseconds), after which their refreshment will be triggered when
- * any component referencing them via `useAsyncData()` hook (re-)renders.
- * Defaults to `maxage` value.
- * @return Returns an object with three fields: `data` holds the actual result of
- * last `loader` invokation, if any, and if satisfies `maxage` limit; `loading`
- * is a boolean flag, which is `true` if data are being loaded (the hook is
- * waiting for `loader` function resolution); `timestamp` (in milliseconds)
- * is Unix timestamp of related data currently loaded into the global state.
- *
- * Note that loaded data, if any, are stored at the given `path` of global state
- * along with related meta-information, using slightly different state segment
- * structure (see {@link AsyncDataEnvelopeT}). That segment of the global state
- * can be accessed, and even modified using other hooks,
- * _e.g._ {@link useGlobalState}, but doing so you may interfere with related
- * `useAsyncData()` hooks logic.
+ * state.
  */
 
-export type DataInEnvelopeAtPathT<StateT, PathT extends null | string | undefined>
-= ValueAtPathT<StateT, PathT, never> extends AsyncDataEnvelopeT<unknown>
-  ? Exclude<ValueAtPathT<StateT, PathT, never>['data'], null>
-  : void;
+export type DataInEnvelopeAtPathT<
+  StateT,
+  PathT extends null | string | undefined,
+> = Exclude<Extract<ValueAtPathT<StateT, PathT, void>, AsyncDataEnvelopeT<unknown>>['data'], null>;
 
 type HeapT<DataT> = {
   // Note: these heap fields are necessary to make reload() a stable function.
@@ -216,14 +190,9 @@ function useAsyncData<DataT>(
   loader: AsyncDataLoaderT<DataT>,
   options: UseAsyncDataOptionsT = {},
 ): UseAsyncDataResT<DataT> {
-  const maxage: number = options.maxage === undefined
-    ? DEFAULT_MAXAGE : options.maxage;
-
-  const refreshAge: number = options.refreshAge === undefined
-    ? maxage : options.refreshAge;
-
-  const garbageCollectAge: number = options.garbageCollectAge === undefined
-    ? maxage : options.garbageCollectAge;
+  const maxage: number = options.maxage ?? DEFAULT_MAXAGE;
+  const refreshAge: number = options.refreshAge ?? maxage;
+  const garbageCollectAge: number = options.garbageCollectAge ?? maxage;
 
   // Note: here we can't depend on useGlobalState() to init the initial value,
   // because that way we'll have issues with SSR (see details below).
@@ -241,14 +210,17 @@ function useAsyncData<DataT>(
     heap.reload = (customLoader?: AsyncDataLoaderT<DataT>) => {
       const localLoader = customLoader || heap.loader;
       if (!localLoader || !heap.globalState) throw Error('Internal error');
-      return load(heap.path, localLoader, heap.globalState, null);
+      return load(heap.path, localLoader, heap.globalState);
     };
   }
 
   if (globalState.ssrContext && !options.noSSR) {
     if (!state.timestamp && !state.operationId) {
       globalState.ssrContext.pending.push(
-        load(path, loader, globalState, state.data, 'S'),
+        load(path, loader, globalState, {
+          data: state.data,
+          timestamp: state.timestamp,
+        }, `S${uuid()}`),
       );
     }
   } else {
@@ -303,17 +275,35 @@ function useAsyncData<DataT>(
       const state2: AsyncDataEnvelopeT<DataT> = globalState.get<
       ForceT, AsyncDataEnvelopeT<DataT>>(path);
 
-      if (refreshAge < Date.now() - state2.timestamp
-      && (!state2.operationId || state2.operationId.charAt(0) === 'S')) {
-        load(path, loader, globalState, state2.data);
+      const { deps } = options;
+      if (
+        // The hook is called with a list of dependencies, that mismatch
+        // dependencies last used to retrieve the data at given path.
+        (deps && globalState.hasChangedDependencies(path || '', deps))
+
+        // Data at the path are stale, and are not being loaded.
+        || (
+          refreshAge < Date.now() - state2.timestamp
+          && (!state2.operationId || state2.operationId.charAt(0) === 'S')
+        )
+      ) {
         loadTriggered = true; // eslint-disable-line react-hooks/exhaustive-deps
+        if (!deps) globalState.dropDependencies(path || '');
+        load(path, loader, globalState, {
+          data: state2.data,
+          timestamp: state2.timestamp,
+        });
       }
     });
 
     useEffect(() => { // eslint-disable-line react-hooks/rules-of-hooks
       const { deps } = options;
-      if (deps && globalState.hasChangedDependencies(path || '', deps) && !loadTriggered) {
-        load(path, loader, globalState, null);
+      if (
+        deps
+        && globalState.hasChangedDependencies(path || '', deps)
+        && !loadTriggered
+      ) {
+        load(path, loader, globalState);
       }
 
     // Here we need to default to empty array, so that this hook is re-evaluated