Latest and stable values

Two small hooks underlie the request hooks and are exported for your own effects and callbacks. Neither triggers a render by itself.

API	Return and lifecycle
useLatest(value)	RefObject updated after each render commits (insertion effect), so a discarded concurrent render never leaves its value behind. Read it in callbacks and effects; read in render it holds the last committed value.
useStableValue(value)	Returns value, but keeps the previous reference while the content is deeply equal (dequal). An inline object can drive an effect's dependencies without re-running it on every render.

useStableValue is how query hooks decide that a query changed: { page: 1 } written inline in every render stays one value until its content differs. It compares content only; it does not clone, freeze or validate. For values that should follow input after a quiet period, use useDebouncedValue; to debounce calls, use useDebouncedCallback.

Removed in 6.0

Removed	Instead
Fullscreen hooks, provider, context and DOM helpers	No replacement in this package; call the Fullscreen API directly or use a hook library.
useRefs, useForceUpdate, useMounted	No replacement; write the few lines you need or use a hook library.
useRequestId	Request identity is the AbortController owned by useExecutePromise.

Complete example

import { useEffect } from 'react';
import { useLatest, useStableValue } from '@ahoo-wang/fetcher-react';

export function Ticker({
  filter,
  onTick,
}: {
  filter: { tag: string };
  onTick: (tag: string, ticks: number) => void;
}) {
  const latestOnTick = useLatest(onTick);
  const stableFilter = useStableValue(filter);
  useEffect(() => {
    // Restarts when the filter's content changes, not on every new object,
    // and always calls the latest onTick without listing it as a dependency.
    let ticks = 0;
    const timer = setInterval(() => {
      ticks += 1;
      latestOnTick.current(stableFilter.tag, ticks);
    }, 1000);
    return () => clearInterval(timer);
  }, [stableFilter, latestOnTick]);
  return <p>Watching {stableFilter.tag}</p>;
}

Public signatures and types

These signatures follow declarations reachable from the current root entry. ? marks optional input; generics/interfaces only constrain compile-time types. Locate inherited and related types through the symbol index. Runtime defaults and failure behavior are described above.

useLatest

export function useLatest<T>(value: T): RefObject<T>;

packages/react/src/core/useLatest.ts:47

useStableValue

export function useStableValue<T>(value: T): T;

packages/react/src/core/useStableValue.ts:22

Related topics

Fetcher hooks · Promise and query state · API hook factories · Debounced execution · Storage and event subscriptions · Security hooks and route guards