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 = { type: 'inc' } | { type: 'setStep'; step: number };
 
function reducer(state: State, action: Action): State {
    switch (action.type) {
        case 'inc':
            return { ...state, count: state.count + state.step };
        case 'setStep':
            return { ...state, step: action.step };
        default:
            return state;
    }
}

Pakai di komponen

tsx

const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 });
 
dispatch({ type: 'inc' });
dispatch({ type: 'setStep', step: 5 });

Lazy init

tsx

const [state, dispatch] = useReducer(reducer, initialArg, init);

init dipanggil sekali untuk menghitung state awal (berguna dari localStorage).

Struktur alur

Contoh form terkait

tsx

type Form = { name: string; email: string };
function formReducer(s: Form, a: Partial<Form>): Form {
    return { ...s, ...a };
}
// dispatch({ email: 'a@b.com' })

Catatan implementasi

• Reducer harus pure: jangan mutasi state langsung, selalu return salinan baru.
• Dispatch bisa di-pass ke child sebagai prop tanpa membawa state utuh (de-coupled).
• Untuk state global, lebih baik Context + useReducer daripada prop drilling berat.

Kesalahan umum

• Mutasi state di reducer: state.count++ langsung merusak immutability.
• Over-pakai: state tunggal dipaksa reducer, malah verbose.
• Action tidak ekshaustive: lupa default sehingga state kembali aneh saat type baru.
• Reducer melakukan side effect: fetch/API call di dalam reducer melanggar purity.

Referensi terkait

• Hooks Dasar React.js: useState, useEffect, useMemo, useCallback, useRef
• State Management Patterns: Local, Lifted, Context, Reducer
• Context, Composition, Prop Drilling