Bilakah anda akan menggunakan useReducer sebagai ganti useState?

Question

Accepted Answer

`useReducer` memusatkan state transitions dalam satu **pure reducer function**, daripada menyebarkan banyak setter `useState`. Ini adalah versi built-in React dari pola Redux. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## Cara kerjanya Anda `dispatch` sebuah **action** (obyek biasa yang menggambarkan acara). React memanggil `reducer(currentState, action)` dan menggunakan obyek yang dikembalikan sebagai state baru. Reducer adalah **pure** (tidak ada efek samping, tidak ada mutasi), yang membuat logika dapat diprediksi dan dapat diuji unit secara terisolasi. ## Kapan lebih baik menggunakannya daripada useState - State selanjutnya **bergantung pada state sebelumnya** dengan cara yang tidak trivial. - Beberapa nilai **berubah bersama-sama** (mis. `count` + `step` + `error`). - Logika pembaruan cukup kompleks sehingga Anda akan mengulanginya di berbagai penangan. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` memiliki **identitas yang stabil**, jadi meneruskannya melalui konteks atau ke anak-anak yang dimemokan tidak menyebabkan re-renders. Untuk nilai sederhana dan independen, `useState` biasa masih lebih jelas.