আপনি কখন `useState` এর পরিবর্তে `useReducer` ব্যবহার করবেন?

Question

Accepted Answer

`useReducer` একটি একক **শুদ্ধ reducer ফাংশনে** state transitions কেন্দ্রীভূত করে, অনেক `useState` setters ছড়িয়ে রাখার পরিবর্তে। এটি Redux প্যাটার্নের 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` করেন (একটি সাধারণ অবজেক্ট যা একটি ইভেন্ট বর্ণনা করে)। React `reducer(currentState, action)` কল করে এবং ফেরত দেওয়া অবজেক্টকে নতুন state হিসেবে ব্যবহার করে। reducer হল **শুদ্ধ** (কোনো side effects নেই, কোনো mutation নেই), যা যুক্তিকে অনুমানযোগ্য এবং একক পরীক্ষাযোগ্য করে তোলে। ## কখন এটি useState এর উপর পছন্দ করবেন - পরবর্তী state **পূর্ববর্তী** state এর উপর অ-তুচ্ছ উপায়ে নির্ভর করে। - একাধিক মান **একসাথে পরিবর্তন হয়** (যেমন `count` + `step` + `error`)। - আপডেট logic এত জটিল যে আপনি এটি handlers জুড়ে পুনরাবৃত্তি করবেন। ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` বোনাস: `dispatch` একটি **স্থিতিশীল পরিচয়** রয়েছে, তাই এটি context এর মাধ্যমে বা memoized children এ পাস করা re-renders সৃষ্টি করে না। সাধারণ, স্বাধীন মূল্যগুলির জন্য, সাধারণ `useState` এখনও স্পষ্টতর।