useState को सट्टामा तपाइँ useReducer कहिले प्रयोग गर्नुहुन्छ?

Question

Accepted Answer

`useReducer` state transitions लाई एकै **pure reducer function** मा केन्द्रीकृत गर्छ, धेरै `useState` setters छरिदिनुको सट्टामा। यो 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** `dispatch` गर्नुहुन्छ (एक साधारण object जो घटना वर्णन गर्छ)। React ले `reducer(currentState, action)` लाई कल गर्छ र फर्काइएको object लाई नयाँ state को रूपमा प्रयोग गर्छ। Reducer **pure** हो (कुनै side effects छैन, कुनै mutation छैन), जसले तर्क पूर्वनिर्धारित र एकाइ-परीक्षण योग्य बनाउँछ। ## useState भन्दा कहिले यो प्राथमिकता दिनुहोस् - अगाडिको state **अघिल्लो** state मा गैर-सामान्य तरिकामा **निर्भर** हुन्छ। - धेरै मान **एकसाथ परिवर्तन** हुन्छन् (जस्तै `count` + `step` + `error`)। - अपडेट तर्क पर्याप्त जटिल छ कि तपाइँ यसलाई हलेरहरूमा दोहोर्याउनुहुन्छ। ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` को **स्थिर पहिचान** छ, त्यसैले यसलाई context को माध्यमबाट वा memoized बच्चाहरूमा पठाउँदा re-renders हुँदैन। साधारण, स्वतन्त्र मानहरूको लागि, सादा `useState` अझै पनि स्पष्ट हो।