คุณจะใช้ useReducer แทน useState เมื่อไร?

Question

Accepted Answer

`useReducer` รวมศูนย์ state transitions ใน **pure reducer function** เดียว แทนที่จะกระจาย `useState` setters จำนวนมาก เป็น Redux pattern เวอร์ชัน built-in ของ React ```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 ; } ``` ## วิธีการทำงาน คุณ `dispatch` **action** (object ธรรมดาที่อธิบายเหตุการณ์) React เรียก `reducer(currentState, action)` และใช้ object ที่คืนมาเป็น state ใหม่ Reducer คือ **pure** (ไม่มี side effects ไม่มี mutation) ซึ่งทำให้ logic สามารถคาดเดาได้และทดสอบหน่วยในการแยกส่วน ## เมื่อควรสนับสนุนมากกว่า useState - State ถัดไป **ขึ้นอยู่กับ** state ก่อนหน้า ในวิธีที่ไม่ธรรมชาติ - ค่าหลายค่า **เปลี่ยนแปลงร่วมกัน** (เช่น `count` + `step` + `error`) - Update logic ซับซ้อนพอที่คุณจะต้องทำซ้ำใน handlers ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` โบนัส: `dispatch` มี **stable identity** ดังนั้นการส่งผ่านผ่าน context หรือไปยัง memoized children ไม่ทำให้เกิด re-renders สำหรับค่าง่าย ๆ และเป็นอิสระ `useState` ธรรมดายังคงชัดเจนกว่า