Async Patterns

React developers track async state manually: three useState calls for loading, data, and error, then an if/else chain in JSX. React 18 introduced <Suspense> and error boundaries to make this declarative, but they require additional setup and a data library that throws Promises.

Svelte has a single, elegant answer baked into the template syntax:

{#await promise}
  <!-- loading -->
{:then value}
  <!-- resolved -->
{:catch err}
  <!-- rejected -->
{/await}

One block. Three states. No hooks, no error boundary components, no thrown Promises. If the promise variable is replaced with a new Promise (for example, when the user clicks “Reload”), Svelte automatically re-enters the loading state.

Manual useState vs `{#await}`

function UserCard({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p style={{ color: 'red' }}>Error: {error}</p>;
  return <div><h2>{user.name}</h2><p>{user.email}</p></div>;
}

<script>
  let { userId } = $props();

  async function loadUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('Not found');
    return res.json();
  }

  let userPromise = $derived(loadUser(userId));
</script>

{#await userPromise}
  <p>Loading...</p>
{:then user}
  <div>
    <h2>{user.name}</h2>
    <p>{user.email}</p>
  </div>
{:catch err}
  <p style="color:red">Error: {err.message}</p>
{/await}

When userId changes, $derived creates a new Promise, and {#await} immediately re-enters the pending state. No manual state resets needed.

React Suspense reference vs `{#await}`

// React — requires library support (react-query, SWR, Relay)
// The library must throw a Promise for Suspense to catch
<Suspense fallback={<Spinner />}>
  <ErrorBoundary fallback={<ErrorUI />}>
    <UserCard userId={1} />
  </ErrorBoundary>
</Suspense>

<!-- Svelte — no extra library, no boundary components -->
{#await userPromise}
  <Spinner />
{:then user}
  <UserCard {user} />
{:catch err}
  <ErrorUI message={err.message} />
{/await}

Try it: simulated async with reload

This demo uses setTimeout to simulate a 500 ms network call that occasionally rejects. Click “Load” to trigger a new Promise — {#await} handles all three states automatically.

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  const MOCK_DATA = [
    { id: 1, name: 'Ada Lovelace', role: 'Mathematician' },
    { id: 2, name: 'Grace Hopper', role: 'Computer Scientist' },
    { id: 3, name: 'Alan Turing', role: 'Mathematician' },
  ];

  function fakeApi() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() < 0.3) {
          reject(new Error('Server error (simulated — try again)'));
        } else {
          const item = MOCK_DATA[Math.floor(Math.random() * MOCK_DATA.length)];
          resolve(item);
        }
      }, 500);
    });
  }

  let personPromise = $state(fakeApi());

  function reload() {
    personPromise = fakeApi();
  }
</script>

<h3>Person Lookup</h3>

{#await personPromise}
  <p>⏳ Fetching...</p>
{:then person}
  <div style="padding:1rem;border:1px solid #ccc;border-radius:6px;margin-bottom:0.75rem">
    <strong>{person.name}</strong>
    <p style="margin:0.25rem 0 0;color:#666">{person.role}</p>
  </div>
{:catch err}
  <p style="color:red">❌ {err.message}</p>
{/await}

<button onclick={reload}>Reload (random result)</button>

🔀 Declarative {#await} vs imperative useState loading state

React: three useState variables (loading, data, error) + useEffect + conditional JSX — the state machine lives in JavaScript logic.
Svelte: the {#await} block encodes the state machine in markup — pending, resolved, and rejected are structural template sections, not boolean flags.
When the promise variable is replaced with a new promise, Svelte automatically transitions back to the pending state. React requires manually resetting loading = true and error = null.
React <Suspense> requires a compatible data library that throws Promises. {#await} works with any native Promise — no library needed.
The {:catch} block is optional. If omitted, rejections are silently ignored (show it while developing; omit only when you are certain the promise never rejects).
You can use {#await promise then value} as a shorthand that skips the loading state entirely.

Async Patterns

Manual useState vs {#await}

React Suspense reference vs {#await}

Try it: simulated async with reload

Manual useState vs `{#await}`

React Suspense reference vs `{#await}`