ما هو useReducer ومتى يفضل اختياره كبديل لـ useState؟

الإجابة المختصرة

هو hook لإدارة الحالات المعقدة التي تتضمن انتقالات حالات متعددة أو عندما تعتمد الحالة التالية على خطوات متفرقة، حيث يفصل منطق تعديل الحالة في دالة Reducer نقية ومستقلة.

الشرح

يتبع useReducer نمط Redux، حيث يستقبل دالة reducer بصيغة (state, action) => newState مع حالة ابتدائية، ويعيد [state, dispatch]. يفضل استخدامه عندما تتألف الحالة من كائن معقد ذي حقول متداخلة، أو عندما يكون منطق التحديث قابلاً للاختبار بمعزل عن المكون، أو عند الحاجة لتفادي تمرير callbacks متعددة واستبدالها بدالة dispatch مستقرة.

مثال بالكود

type Action = { type: 'inc' } | { type: 'dec' } | { type: 'reset' };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'inc': return state + 1;
    case 'dec': return state - 1;
    case 'reset': return 0;
    default: return state;
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => dispatch({ type: 'inc' })}>+</button>
      <button onClick={() => dispatch({ type: 'reset' })}>إعادة ضبط</button>
    </div>
  );
}

أخطاء شائعة

• تنفيذ آثار جانبية (كالـ API calls) مباشرة داخل دالة الـ reducer بدلاً من إبقائها دالة نقية 100%.

أسئلة متابعة

• متى يجب استخدام useRef وما الفارق الجوهري بينه وبين useState؟

المصادر

• React docs — useReducer