میری React ایپ 5,000 ریکارڈز پر کیوں سست ہو گئی

میں نے ایک سرچ ایبل ڈراپ ڈاؤن اور ڈیٹا ٹیبل کے ساتھ ایک React فیچر بنایا۔

ڈویلپمنٹ کے دوران سب کچھ ٹھیک کام کر رہا تھا۔ پھر میں نے اصل پروڈکشن ڈیٹا لوڈ کیا۔ ایپ سست ہو گئی۔

ڈراپ ڈاؤن کھلنے میں سیکنڈز لگ رہے تھے۔ سرچ باکس میں ٹائپ کرنا لیگ (laggy) محسوس ہو رہا تھا۔ ایپ بہت زیادہ میموری استعمال کر رہی تھی۔

مجھے 5,000 صارف ریکارڈز کو ہینڈل کرنا تھا۔ مجھے فوری سرچ اور ہموار اسکرولنگ کی ضرورت تھی۔

یہاں بتایا گیا ہے کہ میں نے اسے کیسے ٹھیک کیا۔

1. کیلکولیشنز کے لیے useMemo کا استعمال کریں

میں نے ہر رینڈر (render) پر ڈیٹا فلٹر کرنا بند کر دیا۔ میں نے فلٹر شدہ لسٹ کو اسٹور کرنے کے لیے useMemo کا استعمال کیا۔ یہ CPU کے لیے غیر ضروری کام کو روکتا ہے۔

2. Debouncing کا اضافہ کریں

ہر کی اسٹروک (keystroke) پر سرچ ٹرگر ہو رہی تھی۔ بڑی لسٹوں کے لیے یہ کافی مہنگا عمل ہے۔ میں نے 300ms کا debounce شامل کیا۔ اب ایپ صرف تب سرچ کرتی ہے جب صارف ٹائپ کرنا بند کر دیتا ہے۔

3. Virtualization کا نفاذ کریں

یہ سب سے بڑا حل تھا۔ 5,000 DOM عناصر (elements) کو رینڈر کرنے کے بجائے، میں نے react-window کا استعمال کیا۔ برا