Reactjs Usereducer Patterns Reducer Action Dispatch Lazy Init

Definisi

useReducer adalah hook untuk mengelola state lokal yang lebih kompleks daripada useState, berbasis pola reducer (state, action) => newState. Cocok saat state punya banyak transisi atau beberapa nilai yang saling terkait.

Kapan dipakai

Pakai useReducer kalau:

• state terdiri dari beberapa field yang berubah bersama
• aksi state bervariasi dan butuh logika terpusat
• kamu ingin memisahkan "apa yang terjadi" (dispatch action) dari "bagaimana state berubah" (reducer)

Untuk state sederhana (satu nilai, setter langsung), useState lebih ringkas.

Cara kerja

Reducer dasar

tsx

type State = { count: number; step: number };
type Action