كيف تمنع تحديثات الحالة من التسبب في إعادة تصيير مفرطة؟

Question

Accepted Answer

تغييرات الحالة تؤدي إلى إعادة تصيير، والحالة المُنظَّمة بشكل سيء يمكن أن تسبب **إعادة تصيير أكثر بكثير من اللازم** — مما يبطئ التطبيق. استراتيجيات المفتاح: الاشتراك بدقة، تقسيم الحالة، memoize، والحفاظ على الحالة محلية. ## 1. اشترك في أقل شريحة تحتاجها ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` الاشتراكات الانتقائية (Zustand/Redux selectors، Jotai atoms) هي أكبر رافعة مفردة — المكونات تعاد تصييرها فقط عند تغيير شريحتها المحددة، وليس في كل تحديث store. ## 2. قسّم الحالة / context لتحديد نطاق التأثير ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoize المكونات والقيم ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` Memoization تمنع الأطفال من إعادة التصيير عندما لم تتغير props (بالمرجعية) — لكنها تعمل فقط إذا أبقيت أيضاً props/callbacks مستقرة مرجعياً (`useCallback`/`useMemo`) وحدّثت الحالة **immutably**. ## 4. احفظ الحالة محلية قدر الإمكان ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. لا تخزّن القيم المشتقة؛ تجنب المراجع الجديدة في كل تصيير ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. استخدم selectors memoized للبيانات المشتقة ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## قِس أولاً ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## لماذا يهم ذلك إعادة التصيير المفرطة هي سبب رئيسي لتطبيقات React/state-driven بطيئة، وتنشأ من كيفية تنظيم الحالة والاشتراك فيها. أدوات الخزانة — الاشتراكات الانتقائية الدقيقة، تقسيم contexts، memoization مع مراجع مستقرة، تحديثات immutable، وتحديد الحالة محلياً — تتحكم مباشرة في نطاق إعادة التصيير. بشكل حاسم، يجب عليك **القياس** (Profiler) لإيجاد الاختناق الفعلي قبل التحسين، لأن memoization المتسرع يضيف تعقيداً دون فائدة. فهم ما يؤدي إلى إعادة التصيير وكيفية احتواؤها أمر ضروري لتطبيقات واسعة الحجم وعالية الأداء.