Apa itu state machines dan kapan mereka membantu?

Question

Accepted Answer

**State machine** memodelkan sistem sebagai himpunan **states** yang berhingga ditambah **transitions** yang diizinkan di antara mereka. Daripada berjuang dengan flag boolean independen, Anda menentukan dengan tepat state mana saja yang ada dan transitions mana yang legal — membuat impossible states tidak dapat direpresentasikan.

## The problem: boolean soup

```js
// ❌ multiple booleans → 2^n combinations, many of them invalid
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — nonsense, but POSSIBLE
```

Dengan flag independen, tidak ada yang menghentikan kombinasi yang bertentangan, dan Anda harus menjaganya tetap konsisten secara manual pada setiap transisi — perangkap bug.

## The state-machine model

```text
States:      idle → loading → success
                       ↓
                     error → (retry) → loading

Only defined transitions are allowed; you can't be in two states at once.
```

```js
const machine = {
  idle:    { FETCH: "loading" },
  loading: { SUCCESS: "success", ERROR: "error" },
  success: { FETCH: "loading" },
  error:   { RETRY: "loading" },
};
function transition(current, event) {
  return machine[current][event] ?? current; // only legal transitions happen
}
```

Variabel `state` tunggal menahan state saat ini; `event` memicu transisi yang *ditentukan*. Transisi ilegal (mis. SUCCESS saat idle) tidak dapat terjadi — impossible states hilang menurut desain.

## Real-world tooling: XState

```js
// libraries like XState formalize this with guards, actions, nested/parallel states
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## When state machines help

```text
✓ Complex flows with many states: checkout, multi-step forms/wizards, media players
✓ Authentication flows (logged out → logging in → logged in → refreshing)
✓ Anything where invalid state combinations cause bugs
✗ Overkill for simple toggles or trivial state
```

## Mengapa ini penting

State machines membawa ketat ke dalam logika stateful kompleks dengan membuat **invalid states impossible** dan transitions **explicit** — mengganti kombinasi boolean yang rapuh dengan model yang jelas dan lengkap.

Mereka sangat berharga untuk alur rumit (wizard, pembayaran, auth, media) di mana boolean soup menyebabkan bug halus yang sulit direproduksi.

Bahkan secara informal (enum `status`) idenya meningkatkan async state; secara formal (XState) menyediakan logika yang dapat divisualisasikan, dapat diuji, dan kuat.

Mengetahui kapan harus menggunakannya adalah tanda dari desain state yang matang.