Data & State — ภาพรวม

React มอบเมนูที่หลากหลายแต่กระจัดกระจาย: useState, useReducer, useContext, useRef, Redux, Zustand, react-query, SWR — แต่ละตัวแก้ปัญหา state คนละส่วน Svelte มีโมเดลเป็นชั้นๆ ที่ครอบคลุมพื้นที่เดียวกันด้วยชิ้นส่วนที่น้อยกว่ามาก:

$state — reactive state ระดับ component (แทน useState)
$derived — ค่าที่คำนวณและอัปเดตอัตโนมัติ (แทน useMemo)
$effect — side effects ที่รันซ้ำเมื่อ dependency เปลี่ยน (แทน useEffect)
Svelte stores (writable, readable, derived) — shared state ข้ามคอมโพเนนต์
.svelte.ts modules — reactive state ระดับ module นำเข้าได้เหมือน JS module ทั่วไป
{#await} — async/loading/error state แบบ declarative ใน markup

โมดูลนี้จะพาไปทีละชั้น เริ่มที่นี่เพื่อดูแผนที่ภาพรวม จากนั้นค่อยดำดิ่งสู่บทเรียนเฉพาะเรื่อง

State ระดับ component: 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>

ความต่างสำคัญ: ตัวแปร $state คือตัวแปรธรรมดาที่แก้ไขได้โดยตรง ไม่มี setter ไม่ต้องใช้ functional update — แค่ assign ค่าตรงๆ compiler ของ Svelte ติดตามการอ่านและเขียนที่ call site เอง

ลองเล่น: 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}