Data & State — Overview

React gives you a rich but fragmented menu: useState, useReducer, useContext, useRef, Redux, Zustand, react-query, SWR — each solving a different slice of the state problem. Svelte has a layered model that covers the same ground with fewer moving parts:

$state — component-local reactive state (replaces useState)
$derived — computed values that update automatically (replaces useMemo)
$effect — side effects that re-run on dependency change (replaces useEffect)
Svelte stores (writable, readable, derived) — shared state across components
.svelte.ts modules — module-level reactive state, imported like any JS module
{#await} — declarative async/loading/error state in markup

This module walks through each layer. Start here for a map, then dive into the dedicated lessons.

Component-local state: useState → $state

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Count: {count}
</button>

The key difference: $state variables are plain mutable variables. No setter, no functional update — just assign. Svelte’s compiler tracks reads and writes at the call site.

Try it: counter + toggled list

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let count = $state(0);
  let showList = $state(false);
  let items = $state(['Apples', 'Bananas', 'Cherries']);
  let newItem = $state('');

  function addItem() {
    if (newItem.trim()) {
      items = [...items, newItem.trim()];
      newItem = '';
    }
  }
</script>

<h3>Counter</h3>
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem">
  <button onclick={() => count--}>-</button>
  <strong>{count}</strong>
  <button onclick={() => count++}>+</button>
  <button onclick={() => count = 0}>Reset</button>
</div>

<h3>
  <button onclick={() => showList = !showList}>
    {showList ? 'Hide' : 'Show'} list ({items.length})
  </button>
</h3>

{#if showList}
  <ul>
    {#each items as item}
      <li>{item}</li>
    {/each}
  </ul>
  <div style="display:flex;gap:0.5rem;margin-top:0.5rem">
    <input bind:value={newItem} placeholder="New item" />
    <button onclick={addItem}>Add</button>
  </div>
{/if}