آپ اسٹیٹ اپڈیٹس کو بہت زیادہ دوبارہ رینڈر ہونے سے کیسے روکتے ہیں؟

Question

Accepted Answer

State کی تبدیلیاں re-renders کو متحرک کرتی ہیں، اور خراب طریقے سے ترتیب شدہ state **ضروری سے بہت زیادہ دوبارہ رینڈرنگ** کا سبب بن سکتا ہے — ایپلیکیشن کو سست کر دیتا ہے۔ کلیدی حکمت عملیں: تنگی سے سبسکرائب کریں، state کو تقسیم کریں، memoize کریں، اور state کو مقامی رکھیں۔ ## 1. آپ کو جس کم سے کم slice کی ضرورت ہے اس کو سبسکرائب کریں ```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); ``` انتخابی subscriptions (Zustand/Redux selectors، Jotai atoms) سب سے بڑا ہتھیار ہے — components صرف اسی صورت میں دوبارہ render ہوتے ہیں جب ان کا مخصوص slice بدلتا ہے، ہر store update پر نہیں۔ ## 2. State / context کو تقسیم کریں تاکہ اثر کی حد محدود ہو ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Components اور values کو 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 بچوں کو دوبارہ render ہونے سے روکتا ہے جب ان کے props (حوالہ کے لحاظ سے) نہیں بدلے ہیں — لیکن یہ صرف اسی صورت میں کام کرتا ہے اگر آپ props/callbacks کو referentially stable رکھیں (`useCallback`/`useMemo`) اور state کو **immutably** اپڈیٹ کریں۔ ## 4. State کو ممکنہ حد تک مقامی رکھیں ```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. اخذ شدہ values کو store نہ کریں؛ ہر render پر نئے حوالوں سے بچیں ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. اخذ شدہ ڈیٹا کے لیے memoized selectors استعمال کریں ```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. ``` ## یہ کیوں اہم ہے بہت زیادہ re-renders React/state-driven ایپلیکیشنز میں سست رفتاری کا ایک بڑا سبب ہیں، اور وہ اس بات سے نکلتے ہیں کہ state کو کیسے ترتیب دیا جاتا ہے اور سبسکرائب کیا جاتا ہے۔ Toolkit — تنگ انتخابی subscriptions، split contexts، memoization مستحکم حوالوں کے ساتھ، immutable updates، اور state کو مقامی بنانا — براہ راست re-render کے دائرے کو کنٹرول کرتا ہے۔ اہم بات یہ ہے کہ آپ کو **ماپنا** چاہیے (Profiler) حقیقی bottleneck تلاش کرنے کے لیے optimization سے پہلے، کیونکہ بے احتیاطی سے memoization پیچیدگی کے بغیر فائدے کے ساتھ شامل کرتا ہے۔ سمجھنا کہ کیا re-renders کو متحرک کرتا ہے اور انہیں کس طرح روکا جائے یہ بڑے پیمانے پر ایپلیکیشنز کے لیے بہترین کارکردگی کے لیے ضروری ہے۔