आप useReducer का उपयोग useState की जगह कब करेंगे?

Question

Accepted Answer

`useReducer` एक **शुद्ध reducer फ़ंक्शन** में स्टेट ट्रांजिशन को केंद्रीकृत करता है, बजाय कई `useState` setters को बिखेरने के। यह Redux पैटर्न का 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 ; } ``` ## यह कैसे काम करता है आप एक **action** भेजते हैं (एक साधारण ऑब्जेक्ट जो किसी घटना का वर्णन करता है)। React `reducer(currentState, action)` कॉल करता है और वापस किए गए ऑब्जेक्ट को नई स्टेट के रूप में उपयोग करता है। reducer **शुद्ध** है (कोई साइड इफेक्ट्स नहीं, कोई म्यूटेशन नहीं), जो लॉजिक को सुपूर्वानुमान योग्य और यूनिट-टेस्ट योग्य बनाता है। ## useState पर इसे कब पसंद करें - अगली स्टेट **पिछली स्टेट पर निर्भर** है गैर-तुच्छ तरीकों से। - कई मान **एक साथ बदलते** हैं (जैसे `count` + `step` + `error`)। - अपडेट लॉजिक काफी जटिल है कि आप इसे हैंडलर्स के पार दोहराते। ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` बोनस: `dispatch` का **स्थिर पहचान** है, इसलिए इसे context के माध्यम से या memoized चिल्ड्रन को पास करना re-renders का कारण नहीं बनता। सरल, स्वतंत्र मानों के लिए, साधारण `useState` अभी भी स्पष्ट है।