কেন আমার React অ্যাপ ৫,০০০ রেকর্ডের সময় ধীরগতির হয়ে গিয়েছিল

আমি একটি সার্চেবল ড্রপডাউন এবং একটি ডেটা টেবিলসহ একটি React ফিচার তৈরি করেছিলাম।

ডেভেলপমেন্টের সময় সবকিছু ঠিকঠাক কাজ করছিল। তারপর আমি রিয়েল প্রোডাকশন ডেটা লোড করলাম। অ্যাপটি ধীরগতির হয়ে গেল।

ড্রপডাউনটি খুলতে কয়েক সেকেন্ড সময় নিচ্ছিল। সার্চ বক্সে টাইপ করার সময় ল্যাগ (lag) অনুভূত হচ্ছিল। অ্যাপটি অতিরিক্ত মেমরি ব্যবহার করছিল।

আমাকে ৫,০০০ ইউজারের রেকর্ড হ্যান্ডেল করতে হয়েছিল। আমার ইনস্ট্যান্ট সার্চ এবং স্মুথ স্ক্রলিং প্রয়োজন ছিল।

আমি যেভাবে এটি ঠিক করেছি তা নিচে দেওয়া হলো।

১. ক্যালকুলেশনের জন্য useMemo ব্যবহার করুন

আমি প্রতিবার রেন্ডারের সময় ডেটা ফিল্টার করা বন্ধ করে দিয়েছি। ফিল্টার করা লিস্টটি স্টোর করার জন্য আমি useMemo ব্যবহার করেছি। এটি CPU-এর অপ্রয়োজনীয় কাজ কমিয়ে দেয়।

২. Debouncing যোগ করুন

প্রতিটি কি-স্ট্রোক (keystroke) আগে একটি সার্চ ট্রিগার করত। বড় লিস্টের ক্ষেত্রে এটি বেশ ব্যয়বহুল। আমি ৩০০ms-এর একটি debounce যোগ করেছি। এখন ইউজার টাইপ করা থামানোর পরই অ্যাপটি সার্চ করে।

৩. Virtualization ইমপ্লিমেন্ট করুন

এটি ছিল সবচেয়ে বড় সমাধান। ৫,০০০টি DOM এলিমেন্ট রেন্ডার করার পরিবর্তে, আমি react-window ব্যবহার করেছি। এখন ব্রাউজার শুধুমাত্র স্ক্রিনে দৃশ্যমান ২০ বা ৩০টি রো (row) রেন্ডার করে। এটি স্ক্রলিং স্মুথ করে এবং মেমরি ব্যবহার কমিয়ে দেয়।

৪. Re-renders রোধ করুন

আমি রো (row) কম্পোনেন্টগুলোতে React.memo ব্যবহার করেছি। ইভেন্ট হ্যান্ডলারের জন্য আমি useCallback ব্যবহার করেছি। এটি চাইল্ড কম্পোনেন্টগুলোর ডেটা অপরিবর্তিত থাকা অবস্থায় সেগুলোকে আপডেট হওয়া থেকে বিরত রাখে।

৫. Server-side Pagination ব্যবহার করুন

আমি একবারে সব ইউজার ফেচ (fetch) করা বন্ধ করে দিয়েছি। আমি ৫০টি রেকর্ডের ছোট ছোট পেজ ফেচ করার পদ্ধতি ব্যবহার করেছি। এর ফলে API রেসপন্স দ্রুত হয় এবং ডেটা পেলোড (payload) ছোট হয়।

৬. Material UI অপ্টিমাইজ করুন

MUI Autocomplete দারুণ, কিন্তু বিশাল লিস্টের ক্ষেত্রে এটি হিমশিম খায়। অ্যাপটিকে দ্রুত রাখতে আমি প্রদর্শিত অপশনগুলোকে প্রথম ১০০টি রেজাল্টের মধ্যে সীমাবদ্ধ রেখেছি।

ফলাফল:

• ড্রপডাউন স্পিড: ৫ সেকেন্ড থেকে ৫০০ms-এর নিচে। • সার্চ রেসপন্স: ল্যাগি থেকে ইনস্ট্যান্ট। • মেমরি ব্যবহার: উল্লেখযোগ্যভাবে হ্রাস পেয়েছে।

পারফরম্যান্সের সমস্যাগুলো প্রায়ই ডেভেলপমেন্টের সময় লুকিয়ে থাকে। যখন রিয়েল ডেটা আপনার ইউজারদের কাছে পৌঁছায়, তখনই সেগুলো প্রকাশ পায়।

প্রথমে আপনার বটনেক (bottleneck) বা বাধাগুলো চিহ্নিত করুন। মেমোইজেশন (memoization), ভার্চুয়ালাইজেশন (virtualization) এবং ডিবাউন্সিং (debouncing)-এর মাধ্যমে সবচেয়ে বড় সমস্যাগুলো সমাধান করুন।

কোন অপ্টিমাইজেশন আপনার React অ্যাপগুলোকে সবচেয়ে বেশি সাহায্য করেছে? কমেন্টে আমাকে জানান।

উৎস: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9