ليه الكومبوننت عندك بترندر كتير؟
في React أي تغيير في state أو props بيعمل re-render تلقائي
وده طبيعي… لكن المشكلة لما re-render ده يحصل بشكل زيادة عن اللزوم
مثلاً:
Parent re-render
كل الـ children بيعملوا re-render حتى لو مفيش حاجة اتغيرت
Functions
بتتخلق من جديد كل مرة → فـ props بتتغير
عمليات تقيلة بتتكرر كل render
النتيجة؟ Performance أبطأ + UI مش سلس
طيب الحل؟ 👇
React.memo
يمنع re-render للـ component لو الـ props متغيرتش
useMemo
يخزن نتيجة العمليات التقيلة بدل ما تتحسب كل مرة
useCallback
يثبت الـ function reference عشان ميحصلش re-render للـ children
Debounce & Throttle
يتحكموا في عدد المرات اللي function بتتنفذ فيها (زي search / scroll)
Lazy Loading (React.lazy + Suspense)
يحمل الـ components عند الحاجة بس بدل ما يحمل كل حاجة مرة واحدة
