Kapan Anda akan menggunakan useReducer sebagai pengganti useState?

Question

Accepted Answer

`useReducer` memusatkan transisi state dalam satu **fungsi reducer murni**, daripada menyebarkan banyak setter `useState`. Ini adalah versi bawaan 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 ; } ``` ## Mengapa ini penting Anda melakukan `dispatch` sebuah **action** (objek biasa yang menjelaskan suatu peristiwa). React memanggil `reducer(currentState, action)` dan menggunakan objek yang dikembalikan sebagai state baru. Reducer adalah **murni** (tanpa efek samping, tanpa mutasi), yang membuat logika dapat diprediksi dan dapat diuji unit secara terisolasi. ## Kapan lebih disukai daripada useState - State berikutnya **tergantung pada state sebelumnya** dengan cara yang tidak sepele. - Beberapa nilai **berubah bersama** (mis. `count` + `step` + `error`). - Logika pembaruan cukup kompleks sehingga Anda mengulanginya di berbagai handler. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` memiliki **identitas yang stabil**, jadi meneruskannya melalui context atau ke children yang di-memoize tidak menyebabkan render ulang. Untuk nilai yang sederhana dan independen, `useState` biasa masih lebih jelas.