آپ useState کی بجائے useReducer کب استعمال کریں گے؟

Question

Accepted Answer

`useReducer` بہت سے `useState` setters کو پھیلانے کی بجائے، state کی منتقلی کو ایک **pure reducer function** میں مرکز کرتا ہے۔ یہ Redux pattern کا React کا built-in ورژن ہے۔ ```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 ; } ``` ## یہ کیسے کام کرتا ہے آپ ایک **action** (ایک سادہ object جو ایک واقعہ بیان کرتا ہے) `dispatch` کرتے ہیں۔ React `reducer(currentState, action)` کو کال کرتا ہے اور واپس کی گئی object کو نیا state استعمال کرتا ہے۔ Reducer **pure** ہے (کوئی side effects نہیں، کوئی mutation نہیں)، جو منطق کو قابل پیش گوئی اور الگ تھلگ طریقے سے unit-testable بناتا ہے۔ ## کب اسے useState پر ترجیح دینی چاہیے - اگلا state **غیر معمولی طریقوں میں** **پچھلے** state پر **منحصر** ہے۔ - متعدد اقدار **ایک ساتھ تبدیل** ہوتی ہیں (مثال کے طور پر `count` + `step` + `error`)۔ - Update logic اتنا پیچیدہ ہے کہ آپ اسے handlers میں دہرا سکتے ہیں۔ ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` بونس: `dispatch` کا **مستحکم شناخت** ہے، لہذا اسے context کے ذریعے یا memoized children کو منتقل کرنا re-renders کا سبب نہیں بنتا۔ سادہ، آزاد اقدار کے لیے، سادہ `useState` اب بھی واضح ہے۔