التحديثات المتقدمة للـ State (State Updater Functions)

الدرس الثالث عشر: التحديثات المتقدمة للـ State (State Updater Functions)

في هذا الدرس، سنتناول كيفية التعامل مع التحديثات المتقدمة لـ state في React، باستخدام دوال التحديث (State Updater Functions)، وكيفية تعديل state بناءً على القيم السابقة. سنتعرف أيضًا على كيفية استخدام useReducer بدلاً من useState في حالات معينة حيث يكون التعامل مع الـ state معقدًا.

1. التحديث باستخدام دوال التحديث (State Updater Functions)

في React، عند تحديث state، من المهم أن نفهم كيفية التعامل مع القيم السابقة للـ state لضمان دقة التحديثات. في حالات معينة، قد يعتمد تحديث الـ state على قيمته السابقة، لذلك يمكننا استخدام دوال التحديث المدمجة في useState لضمان تحديث state بشكل صحيح.

مثال على استخدام دالة التحديث بناءً على القيم السابقة:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1); // استخدام دالة التحديث بناءً على القيمة السابقة
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1); // استخدام دالة التحديث بناءً على القيمة السابقة
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

الشرح:

• في هذا المثال، عند تحديث الـ count، نستخدم دالة التحديث setCount التي تأخذ دالة تقوم بتحديث الـ state بناءً على القيمة السابقة.
• هذه الطريقة تضمن أن التحديث يتم بشكل دقيق إذا كان يعتمد على state الحالي، وتعتبر الطريقة المثلى عندما نتعامل مع التحديثات المتتالية (مثل العدادات).

2. متى يجب استخدام دوال التحديث (State Updater Functions)

استخدام دوال التحديث بناءً على القيم السابقة يصبح ضروريًا في الحالات التي:

• يتم فيها تحديث الـ state بناءً على قيمة state السابقة.
• يكون هناك تزامن بين التحديثات. على سبيل المثال، إذا كان لديك عدة أحداث أو تغييرات تحدث بسرعة، يجب عليك أن تضمن أن كل تحديث يعتمد على القيمة الصحيحة لـ state في اللحظة الحالية.

3. استخدام useReducer بدلاً من useState

في بعض الحالات، قد تصبح الـ state معقدة بحيث يتطلب التعامل معها منطقًا إضافيًا أو عدة حالات متداخلة. في هذه الحالات، يمكن أن يكون useReducer الخيار الأفضل بدلاً من useState.

useReducer هو هُوك يسمح بإدارة state بطريقة أكثر قوة، وهو مشابه للـ Redux في الطريقة التي يتم بها التعامل مع الأحداث وإدارة التحديثات.

الفرق بين useState و useReducer:

• useState: مفيد في حالة التعامل مع حالة بسيطة مثل عداد أو قيمة واحدة.
• useReducer: مفيد عندما تكون الـ state أكثر تعقيدًا وتتطلب منطقًا مخصصًا للتحديث، مثل القوائم أو الكائنات المتعددة.

مثال على استخدام useReducer:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

الشرح:

• في هذا المثال، استخدمنا useReducer بدلاً من useState لإدارة الحالة الخاصة بالعداد.
• الدالة reducer هي التي تحدد كيفية تحديث state بناءً على نوع الحدث (action).
• عند الضغط على الأزرار، يتم إرسال action إلى الدالة dispatch، التي تُحدِّث state بناءً على نوع الفعل (increment أو decrement).

4. متى يجب استخدام useReducer؟

من الأفضل استخدام useReducer في الحالات التي:

• تحتاج فيها إلى إدارة حالات معقدة مثل القوائم أو الكائنات متعددة القيم.
• يكون لديك منطق تحديث متشابك يتطلب التفاعل مع أحداث متعددة.
• تحتاج إلى التحكم الكامل في كيفية تحديث الـ state بناءً على نوع الحدث أو الفعل.

5. الدمج بين useState و useReducer

في بعض الحالات، قد تحتاج إلى دمج استخدام useState و useReducer في نفس التطبيق، بحيث تستخدم useReducer لإدارة الحالات المعقدة و useState للحالات البسيطة.

مثال على الدمج بين useState و useReducer:

import React, { useState, useReducer } from 'react';

// تعريف reducer
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [name, setName] = useState('');

  const handleNameChange = (e) => setName(e.target.value);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      
      <div>
        <label>Name: </label>
        <input type="text" value={name} onChange={handleNameChange} />
      </div>
    </div>
  );
}

export default Counter;

الشرح:

• في هذا المثال، نستخدم useReducer لإدارة حالة العداد count بينما نستخدم useState لإدارة name.
• يمكن دمج الاثنين بسهولة في التطبيقات الكبيرة التي تحتاج إلى إدارة حالات متعددة.

6. الختام

في هذا الدرس، تعلمنا:

• كيفية استخدام دوال التحديث (State Updater Functions) لتحديث الـ state بناءً على القيم السابقة.
• متى يجب استخدام useReducer بدلاً من useState في حالات معينة.
• كيفية بناء منطق أكثر تعقيدًا باستخدام useReducer لإدارة state في الحالات التي تتطلب معالجة أكثر قوة.

تعلم هذه الأساسيات يمكن أن يساعد في تحسين تصميم وإدارة state في تطبيقات React الكبيرة والمعقدة، مما يتيح لك القدرة على التعامل مع البيانات بمرونة ودقة أكبر.