في Reactjs، واجهنا الكثير من الحلقات اللانهائية أو إعادة تصيير غير مجدية. إنه شيء لا مفر منه، لكن يمكننا أن نكون أكثر انتباهاً بشأنه في بعض الأحيان. أحد الأسباب التي تسبب لنا هذا النوع من المشاكل هو useEffect؛ سأتحدث عن أحد الأخطاء التي يمكن أن نرتكبها به ونتعلم كيف نكون على دراية به.

الأخطاء في useEffect

الأخطاء في useEffect

تحقق من هذا أولًا:

const [state, setState] = React.useState(0);
React.useEffect(() => {
  console.log("re-rendering");
}, [{ ...someData }])

الآن إذا قمنا بعمل setState عدة مرات، فسنرى هذا في وحدة التحكم:

re-rendering
re-rendering
re-rendering

لقد مررنا للتو بعض البيانات كقائمة تبعية؛ لكن لماذا يسجل ذلك؟ هذا لا يتعلق حتى بالحالة!

نعم، إنها غير مرتبطة، لكن انتبه أكثر لقائمة التبعية؛ لقد مررنا كائنًا مضمنًا، مما يعني أنه مختلف دائمًا عن نسخته السابقة؛ نقوم بإنشائه في كل مرة نتسبب في إعادة تصيير المكون. افحص هذا:

{ ...someData } === { ...someData } // false
{} === {} // false
[] === [] // false
// all are inline and have different references

useEffect بطريقة ما تقوم بتخزين قائمة التبعيات مؤقتًا وتحقق مما إذا كانت تساوي القيمة التالية. هذا هو سبب اختلاف القيم المضمنة غير الأولية ([] ، {} ، {… البيانات} ، …) دائمًا في هذه الأداة.

الرمز () استثناء هنا ، فهو يختلف في كل مرة نقوم بإنشائه ، لكنه قيمة بدائية.

على سبيل المثال، تحقق من هذا، لقد رأيت العديد من المطورين يتحققون من جزء من مصفوفة مثل هذا:

const [state, setState] = React.useState([1, 2, 3, 4, 5]);
React.useEffect(() => {
  console.log("re-rendering");
}, [state.slice(0, 2)]); 
/* 
	prevVal = state.slice(0, 2) // first render
		***
	nextVal = state.slice(0, 2) // second render
		***
	prevVal === nextVal // false
*/

السلوك المتوقع هو التحقق من 1 إلى 3 قيم، لكنه لا يعمل بهذه الطريقة لأن طريقة الشريحة ستعيد دائمًا مصفوفة جديدة (مرجع).

آمل أن يحظى هذا المقال بإعجابكم. لا تنسى مشاركة وإرسال ردود الفعل على مقالتي.

المصدر: Bugged🐞

محمدباقر عبيات

The one Who loves solving stuff and writing about them.

منشور ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة