Apakah itu mesin keadaan dan bilakah ia membantu?

Question

Accepted Answer

Sebuah **mesin keadaan** memodelkan sistem sebagai set terbatas **keadaan** ditambah **transisi** yang dibenarkan di antara mereka. Daripada menyulap bendera boolean independen, Anda mendefinisikan dengan tepat keadaan mana yang ada dan transisi mana yang sah — membuat keadaan yang tidak mungkin tidak dapat diwakili.

## Masalahnya: 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 bendera independen, tidak ada yang menghentikan kombinasi yang saling bertentangan, dan Anda harus secara manual menjaga konsistensi mereka pada setiap transisi — magnet bug.

## Model mesin keadaan

```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 menyimpan keadaan saat ini; `event` memicu transisi yang *ditentukan*. Transisi ilegal (misalnya SUKSES saat menganggur) cukup tidak bisa terjadi — keadaan yang tidak mungkin hilang sesuai desain.

## Peralatan dunia nyata: 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" } },
  },
});
```

## Kapan mesin keadaan membantu

```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

Mesin keadaan membawa kekakuan pada logika stateful yang kompleks dengan membuat **keadaan yang tidak valid mustahil** dan transisi **eksplisit** — menggantikan kombinasi boolean yang rapuh dengan model yang jelas dan menyeluruh.

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

Bahkan secara informal (enum `status`) idenya meningkatkan keadaan asinkron; secara formal (XState) ini memberikan logika yang dapat divisualisasikan, dapat diuji, dan tangguh.

Mengetahui kapan harus menggunakannya adalah tanda desain keadaan yang matang.