هل React يقوم بعمل batch للحالة إن كانت بداخل دالة async؟

Adam Ebrahim · 28 مارس 2021

في مكونات الصنف class components، تقوم this.setState بعمل batch إن كانت بداخل دالة لمعالجة حدث ما event handler، لكن ما الذي سيحدث إن تم تحديث حالة المكون من خارج event handler بإستخدام useState؟

function Component() {
  const [firstState, setFirstState] = useState('first');
  const [secondState, setSecondState] = useState('second');

  function handleClick() {
    Promise.resolve().then(() => {
      setfirstState('First State Changed');
      setsecondState('Second State Changed');
    });
  }

  return (
    <button onClick={handleClick}>
      {firstState}
      <br />
      {secondState}
    </button>
  )
}

ما الذي سيحدث في الكود السابق؟ هل سيتم تحديث الحالة وعرضها أيضًا في المتصفح؟

Abdullah Muhammad · 28 مارس 2021

قبل البداية في الرد على السؤال لديك خطأ بسيط في كتابة أسماء الدوال التاليه عند إستدعائها داخل الداله handleClick
وهما setfirstState و setsecondState والصحيح setFirstState و setSecondState

ننتقل الى لب السؤال بكل بساطة
لدينا حالتين نقوم بعمل تحديث لل state فيها
الحالة الأولى: إذا كنا داخل عملية غير تزامنيه (asynchronously)
ففي هذه الحاله لا يتم عمل batching بل لكل تحديث لل State سوف يتم عملية render كامله كما هو الحال في الكود الخاص بك المرفق في السؤال.

الحالة الثانية: في حالة قمنا بتحديث ال state مباشرة ودون التواجد داخل أي عملية غير تزامنيه
فهنا يتم تنفيذ ال batching وتتم عملية ال render مرة واحدة فقط ويمكننا تعديل الكود الخاص بك قليلا كمثال على ذلك كالتالي

function Component() {
  const [firstState, setFirstState] = useState('first');
  const [secondState, setSecondState] = useState('second');

  function handleClick() {
   
      setfirstState('First State Changed');
      setsecondState('Second State Changed');
  }

  return (
    <button onClick={handleClick}>
      {firstState}
      <br />
      {secondState}
    </button>
  )
}