useDeferredValue

Returns a value that follows source in the transition lane: it keeps the previous value while urgent updates run, and takes the new value when the lane applies it.

Returns a value that follows source in the transition lane: it keeps the previous value while urgent updates run, and takes the new value when the lane applies it. Reads of the source are unaffected. On the server it returns the source itself (there is no lane).

Import#

import { useDeferredValue } from "@shadow-js/core";

Signature#

function useDeferredValue<T>(
  source: Accessor<T>,
  options?: DeferredValueOptions<T>,
): Accessor<T>

Parameters#

Name	Description
`source`	The value to follow. Tracked by a watcher that runs in the transition lane.
`options`	Equality and a devtools name. Undefined uses the defaults.

Returns#

An accessor of the deferred value. It starts as the source's current value.

Examples#

import { useDeferredValue, useMemo, useSignal } from "@shadow-js/core";

const names = ["Ada", "Grace", "Linus"];
function Search() {
  const [query, setQuery] = useSignal("");
  const deferredQuery = useDeferredValue(query);
  const results = useMemo(() => names.filter((name) => name.includes(deferredQuery())));
  return (
    <label>
      <input value={query()} onInput={(e) => setQuery(e.currentTarget.value)} />
      {results().join(", ")}
    </label>
  );
}