انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: متى لا تحتاج إلى useEffect والبدائل الهندسية الأنظف

Derive Data During Render احسب البيانات المشتقة أثناء العرض

تخلص من الاستخدام الزائد لخطاف useEffect عبر حساب البيانات المشتقة أثناء التصيير، ومعالجة أفعال المستخدم في دوال الحدث، وتصفير الحالة بخاصية key مباشرة.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

متى أمكن حساب قيمة بالكامل اعتماداً على props أو state الموجودة بالفعل — مثل دمج الاسم الكامل، أو تصفية قائمة الدورات، أو جمع إجمالي الساعات — فلا تضعها في حالة مستقلة ولا تحدثها عبر useEffect أبداً.

احسبها مباشرة كمتغير const عادي في جسم دالة المكون لتكون محدثة ودقيقة بنسبة 100% منذ دورة التصيير الأولى.

الصف 2 كود برمجي
HTML 
const [query, setQuery] = useState('');
const visible = COURSES.filter((c) =>
  c.title.toLowerCase().includes(query.toLowerCase())
);
const totalHours = visible.reduce(
  (sum, c) => sum + c.hours,
  0
);
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (متى لا تحتاج إلى useEffect والبدائل الهندسية الأنظف)