Async Utilities

A collection of utilities for working with asynchronous operations in SolidJS v2.

Overview

Available utilities:

isPending - For checking if an async signal is pending
catchError - For handling errors in signal computations
latest - For getting the latest resolved value of a signal, even if it's pending
resolveAsync - For resolving a signal asynchronously

isPending

isPending returns true if an async signal is pending.

import { isPending, createAsync } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));

  return <div class={isPending(user) ? "loading" : ""}>Name: {user().name}</div>;
}

isPending also works with signals derived from async signals.

import { isPending, createAsync, createMemo } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));
  const name = createMemo(() => user().name);

  return <div class={isPending(name) ? "loading" : ""}>Name: {name()}</div>;
}

catchError

catchError is a utility function that returns an Error thrown inside a signal, or undefined if the signal resolves without throwing.

import { catchError, createAsync } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));
  const error = () => catchError(user);

  return <div>{error()?.message || "No error"}</div>;
}

catchError also works with signals derived from other signals that throw errors.

import { catchError, createMemo, createAsync } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));
  const name = createMemo(() => user().name);
  const error = () => catchError(name);

  return <div>{error()?.message || "No error"}</div>;
}

catchError handles errors thrown both synchronously and asynchronously.

import { catchError, createMemo, createAsync } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));
  const adminName = createMemo(() => {
    if (!user().isAdmin) {
      throw new Error("User is not an admin");
    }
    return user().name;
  });
  const error = () => catchError(adminName);

  return <div>{error()?.message || "No error"}</div>;
}

latest

latest is a utility function that returns the latest resolved value of a signal (also works with signals derived from async signals), even if it's pending.

Definition

declare function latest<T>(fn: () => T): T;
declare function latest<T, U>(fn: () => T, fallback: U): T | U;

Latest can be useful when you need to show stale data (latest data) while new data is being fetched. In the following example new user is being fetched with updated user id, old (latest) name will be shown.

import { createSignal, createAsync, latest } from "solid-js";

const USERS = [
  { id: 1, name: "Eric" },
  { id: 2, name: "John" },
  { id: 3, name: "Rick" },
];

// Simulate network request
const fetchUser = (id: number) =>
  new Promise((resolve) =>
    setTimeout(() => {
      resolve(USERS.find((item) => item.id === id));
    }, 1000)
  );

function LatestExample() {
  const [userIdToFetch, setUserIdToFetch] = createSignal(1);

  const user = createAsync(async () => fetchUser(userIdToFetch()));
  // `info` will show updated `userIdToFetch` and old (latest) user's name
  const info = () => `id = ${userIdToFetch()}, name = ${latest(() => user()?.name)}`;

  return (
    <section>
      <p>User id to fetch: {userIdToFetch()}</p>
      <p>User: {info()}</p>
      <button onClick={() => setUserIdToFetch((id) => ++id)}>Fetch next user</button>
    </section>
  );
}

If you don't use latest:

const info = () => `id = ${userIdToFetch()}, name = ${user()?.name}`;

You'll never see old user name and updated user id: name and id will match.

resolveAsync

resolveAsync is a utility function that returns a promise that resolves with the value of the signal.

import { resolveAsync, createAsync } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));

  async function handleClick() {
    const user = await resolveAsync(user);
    console.log(user.name);
  }

  return <button onClick={handleClick}>Log User</button>;
}

resolveAsync also works with signals derived from async signals.

import { resolveAsync, createAsync } from "solid-js";

function UserProfile(props: { userId: string }) {
  const user = createAsync(() => fetchUser(props.userId));
  const name = createMemo(() => user().name);

  async function handleClick() {
    const name = await resolveAsync(name);
    console.log(name);
  }

  return <button onClick={handleClick}>Log User</button>;
}

Last updated: 4/27/25, 3:38 AM

Edit this page on GitHub