createDeferred

Creates an async memo that may lag, but never leads: after its first answer, a refetch holds nothing — readers keep the previous answer until the new one lands, and isPending reports the refetch. See createDeferred in @solidjs/signals. Hydrates like createMemo: the server's answer is its first.

Import

import { createDeferred } from "solid-js";

Type signature

function createDeferred<T>(
  compute: ComputeFunction<NoInfer<T>, T>,
  options: MemoOptions<T> & { loadingValue: T }
): SourceAccessor<T>;
function createDeferred<T>(
  compute: ComputeFunction<undefined | NoInfer<T>, T>,
  options?: MemoOptions<T>
): SourceAccessor<T>;

Parameters

compute

• Type: ComputeFunction<NoInfer<T>, T> | ComputeFunction<undefined | NoInfer<T>, T>

options

• Type: MemoOptions<T> & { loadingValue: T } | MemoOptions<T>
• Optional

Examples

const rows = createDeferred(() => fetchRows(store.period));

<section class={{ stale: isPending(() => rows()) }}>
  <For each={rows()}>{(row) => <Row row={row} />}</For>
</section>;

Caveats

• createDeferred is not latest on every consumer. latest shows a value now while the update stays held for every other reader; a deferred memo is not part of the update, so nothing waits for it. See Let a panel lag.
• Use it for data that may fall behind the rest of the page without making it wrong, such as an independent widget or a feed. Data that must agree with the rest of the page belongs in createMemo.
• Its first load still suspends to the nearest Loading boundary, unless loadingValue is set.

Learn more

• Reactivity
• Async reactivity
• Debugging reactivity