React يعيد تقييم المكون بأكمله عند تحديث الحالة - كيف يمكنني إصلاح ذلك؟

في react عند تغيير الstate يتم عمل rerender للcomponent كامل 
ولكن للحد من تلك المشكلة يتم اللجوء لإستخدام حلول مثل useMemo
حيث أنة يتم تقسيم الكود الي components أصغر 
و تستعمل useMemo لإخبار react أن ذلك الcomponent لن يحدث له rerender الا في حالة تغير الstates الموجودة في قائمة الإعتمادات أو الarray of dependencies

و أيضا استعمال useCallBack لعدم تعريف الfunction من جديد في كل مرة يتم فيها عمل rerender للcomponent

import React, { useState } from 'react';

const DisplayCount = React.memo(({ count }) => {
  console.log('Rendering DisplayCount');
  return <p>العدد: {count}</p>;
});

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = React.useCallBack(()=>{ setCount(count + 1);
	},[setCount,count])


  return (
    <div>
      <DisplayCount count={count} />
      <button onClick={handleIncrement}>زيادة</button>
    </div>
  );
};

export default MyComponent;

في الحقيقة، مشكلة اعادة تحميل ال component في react هي ليست مشكلة، بل هي أمر متضمن بالمكتبة وينفذ by default في حالات معينة (ليس دائما).

مع ذلك، يمكنك تحديث الحالة بطريقة صحيحة لتجنب حدوث ذلك، وهذه هي الطريقة:
 

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

// تحديث الحالة الخاطئ
const handleIncrement = () => {
  setCount(count + 1);
};

// تحديث الحالة الصحيح
const handleIncrement = () => {
	setCount(prev => prev + 1)
}

ال prev هنا هو الحالة السابقة لل state، أي أن العداد يبدأ عند القيمة 0، وعند التحديث يقوم بجلب هذا ال 0 ويزيد فوقه المقدار 1، مما يمنع اعادة تحميل ال component كله.