SolidJS createResource and transition() synchronization for concurrent signal updates

Synchronizing Concurrent Signal Updates

In SolidJS, the transition() API batches multiple concurrent signal updates into a single UI transition. When several signals serving as the source for a createResource are updated within the same transition() block, SolidJS treats the resulting resource update as one atomic operation. This prevents the UI from flickering through multiple intermediate loading states.

Handling Overlapping Resource Requests

If a second signal update triggers a new resource fetch before the first promise has resolved, SolidJS handles the race condition via its internal resource management:

• Request Superseding: The most recent request takes precedence. When the second update occurs, the resource enters a pending state. If the first promise resolves after the second request has been initiated, its result is typically ignored to prevent "out-of-order" data updates.
• Loading State Persistence: Because these updates are wrapped in transition(), the resource does not immediately flip to a loading state that clears the UI. Instead, it maintains the previous value while the new promise (or series of promises) settles.

Implementation Pattern

To ensure concurrent updates are synchronized and do not trigger multiple layout shifts, wrap all dependent signal updates in a single transition call:

import { createSignal, createResource, transition } from "solid-js";

const [params, setParams] = createSignal({ id: 1, filter: "all" });
const [data] = createResource(
  () => params(),
  async (p) => (await fetch(`/api/data?id=${p.id}&filter=${p.filter}`)).json()
);

const updateAll = (newId, newFilter) => {
  transition(() => {
    // Both updates are batched; the resource triggers once
    setParams({ id: newId, filter: newFilter });
  });
};

Verification and Assumptions

This behavior assumes the use of SolidJS 1.5+ where transition() is the standard for deferring resource updates. You can verify this by observing the .loading property of the resource: during a transition, loading becomes true, but the resource value remains the previous result until the new promise resolves.

Diagnostic Detail Needed: Are you updating these signals within a single transition() block, or are they being triggered by separate asynchronous events (e.g., two different fetch callbacks) calling transition() independently?