Reactivity Overview

Reactivity ของ React สร้างบน immutability — คุณไม่เคย mutate state โดยตรง; คุณเรียก setter และ React จัดตาราง re-render Reactivity ของ Svelte 5 สร้างบน rune และ direct assignment — คุณประกาศ state ด้วย $state() แล้ว mutate ได้เหมือน JavaScript variable ทั่วไป compiler ของ Svelte ตรวจจับการ assign และ emit โค้ด DOM update ทั้งสองโมเดลให้ผลลัพธ์เหมือนกัน แต่ feel ต่างกันมาก

ประกาศ state

function Counter() {
  // Must call useState — raw let gives a stale value
  const [count, setCount] = React.useState(0);
  return <p>Count: {count}</p>;
}

<script>
  // $state() marks this as reactive — plain let is not tracked
  let count = $state(0);
</script>

<p>Count: {count}</p>

อัปเดต state

function Counter() {
  const [count, setCount] = React.useState(0);
  // Must call the setter — mutating count directly does nothing
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}

<script>
  let count = $state(0);
  // Direct mutation — no setter needed
</script>

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

Derived / computed value

ใน React คุณใช้ useMemo เพื่อหลีกเลี่ยงการคำนวณซ้ำในทุก render ใน Svelte 5 คุณใช้ $derived — ไม่มี dependency array ไม่มี hook rule แค่ expression

function ShoppingCart({ items }) {
  const total = React.useMemo(
    () => items.reduce((sum, item) => sum + item.price, 0),
    [items]   // <-- must list every dependency manually
  );
  return <p>Total: ${total}</p>;
}

<script>
  let { items } = $props();
  // Dependencies tracked automatically — no array needed
  let total = $derived(
    items.reduce((sum, item) => sum + item.price, 0)
  );
</script>

<p>Total: ${total}</p>

Side effect

useEffect กลายเป็น $effect การเปลี่ยนแปลงที่ยินดีที่สุด: ไม่มี dependency array Svelte ติดตาม $state variable ที่ effect ของคุณอ่านและ re-run โดยอัตโนมัติเมื่อมีการเปลี่ยนแปลง

function TitleUpdater({ title }) {
  React.useEffect(() => {
    document.title = title;
    // Must list title in the array or the effect goes stale
  }, [title]);
  return null;
}

<script>
  let { title } = $props();
  // Runs when title changes — Svelte tracks it automatically
  $effect(() => {
    document.title = title;
    // Return a cleanup function just like useEffect
    return () => { document.title = 'App'; };
  });
</script>

ลองเล่น: reactive counter พร้อม rune ทั้งสามตัว

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let count = $state(0);
  let step = $state(1);
  let doubled = $derived(count * 2);

  $effect(() => {
    if (count > 10) {
      console.log('Count exceeded 10!');
    }
  });
</script>

<div class="demo">
  <label>
    Step:
    <input type="number" bind:value={step} min="1" max="5" style="width:3rem;margin-left:0.5rem" />
  </label>
  <div class="row">
    <button onclick={() => count -= step}>-{step}</button>
    <span class="count">{count}</span>
    <button onclick={() => count += step}>+{step}</button>
  </div>
  <p class="derived">Doubled: {doubled}</p>
  <button class="reset" onclick={() => (count = 0)}>Reset</button>
</div>

<style>
  .demo { font-family: sans-serif; display: flex; flex-direction: column; gap: 0.75rem; }
  .row { display: flex; align-items: center; gap: 1rem; }
  .count { font-size: 2rem; font-weight: bold; min-width: 3rem; text-align: center; }
  button { font-size: 1rem; padding: 0.3rem 0.75rem; cursor: pointer; }
  .derived { margin: 0; color: #666; }
  .reset { font-size: 0.85rem; }
</style>

🔀 React useState / useMemo / useEffect vs Svelte 5 runes

React: const [x, setX] = useState(init) — สอง variable, setter, บังคับ immutability Svelte: let x = $state(init) — variable เดียว mutable ได้ compiler จัดการ reactivity
React: setCount(c => c + 1) — functional updater เพื่อหลีกเลี่ยง stale closure Svelte: count++ — อ่านค่าปัจจุบันเสมอ ไม่มีความเสี่ยง stale closure
React: useMemo(() => expr, [deps]) — manual dependency array ต้องปฏิบัติตาม hook rule Svelte: $derived(expr) — ติดตาม dependency โดยอัตโนมัติ ไม่มี array ไม่มี rule
React: useEffect(() => {}, [deps]) — manual dependency array เก่าได้ง่าย Svelte: $effect(() => {}) — ติดตามโดยอัตโนมัติ re-run เมื่อ $state ที่อ่านเปลี่ยน
React: Effect รันหลัง render; cleanup return จาก callback Svelte: cleanup ของ $effect เหมือนกัน — return function
React state ต้องไม่ mutate โดยตรง (object/array ต้อง spread/copy) Svelte $state object สามารถ mutate ในที่เดิมได้ — items.push(newItem) ใช้ได้เลย