0Pricing
Sveltejs Academy · Lesson

$state: Fine-Grained Reactivity

Declare reactive state with the $state rune for granular DOM updates.

$state: Fine-Grained Reactivity is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Declare State

Use $state(initial) to declare a reactive variable.

let count = $state(0);

Reassign Normally

Update with regular assignment. Svelte re-renders dependent UI.

count = count + 1;

Objects and Arrays

$state with objects/arrays creates deep proxies; mutations are reactive.

let user = $state({ name: "Ada" });
user.name = "Bea";   // triggers update

No More items = items

You no longer need to reassign to trigger updates — proxies catch mutations.

Granular Updates

Only the parts of the DOM using the changed property re-render.

Function Returns

You can return $state-backed objects from functions for reusable state slices.

function counter() {
  let n = $state(0);
  return {
    get value() { return n; },
    increment() { n++; }
  };
}

Use in Libraries

$state works in .ts/.js files too if they use the .svelte.ts extension.

Untracked

Use untrack() to read a state value without registering a dependency.

Raw State

For huge non-reactive data, use $state.raw to skip the proxy.

Frozen Snapshot

Use $state.snapshot(obj) to get a plain non-proxied copy.

Compared to let

$state is the modern replacement for plain let with implicit reactivity.

Quick Check

What happens when you mutate $state object?

Recap

$state creates fine-grained reactive variables, including deep-proxied objects and arrays.

Frequently asked questions

Is the “$state: Fine-Grained Reactivity” lesson free?

Yes — the full text of “$state: Fine-Grained Reactivity” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.

What will I learn in “$state: Fine-Grained Reactivity”?

Declare reactive state with the $state rune for granular DOM updates. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Sveltejs Academy?

No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “$state: Fine-Grained Reactivity” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Sveltejs Academy lesson?

Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Why Runes: Moving Beyond the Compiler Magic
  2. $state: Fine-Grained Reactivity
  3. $derived: Declarative Computed Values
  4. $effect: Side Effects
← Back to Sveltejs Academy