React পারফরম্যান্স অপ্টিমাইজেশন চেকলিস্ট
ধীরগতির অ্যাপ্লিকেশন ব্যবসার ক্ষতি করে।
এগুলো বাউন্স রেট বাড়িয়ে দেয় এবং ব্যবহারকারীদের বিরক্ত করে। এছাড়া এগুলো আপনার ইনফ্রাস্ট্রাকচার খরচও বাড়িয়ে দেয়।
এটি ঠিক করার জন্য আপনার জটিল কোনো কৌশলের প্রয়োজন নেই। বেশিরভাগ স্পিড বা গতির সমস্যা আসে অপ্রয়োজনীয় কাজ থেকে। দ্রুততর React অ্যাপ তৈরির জন্য এই চেকলিস্টটি ব্যবহার করুন।
অপ্রয়োজনীয় Re-renders বন্ধ করুন
React দ্রুত, কিন্তু হাজার হাজার অতিরিক্ত কম্পোনেন্ট রেন্ডার করা মোটেও দ্রুত নয়।
- কম্পোনেন্ট ছোট রাখুন এবং বড় কম্পোনেন্টগুলোকে ভাগ করে নিন।
- স্টেট (state) যেখানে ব্যবহার করছেন তার কাছাকাছি নিয়ে আসুন।
- শুধুমাত্র সেই কম্পোনেন্টগুলোর জন্য
React.memoব্যবহার করুন যেগুলো ঘনঘন রেন্ডার হয় বা যেগুলোতে ভারী কাজ থাকে। - প্রতিটি ছোট কম্পোনেন্টকে
React.memoদিয়ে মুড়িয়ে দেবেন না। রেন্ডার করার চেয়ে প্রপস (props) তুলনা করতে বেশি সময় বা খরচ হয়।
ভারী লজিক হ্যান্ডেল করুন
- ডেটা সর্টিং বা ফিল্টারিংয়ের মতো ব্যয়বহুল কাজের জন্য
useMemoব্যবহার করুন। - মেমোইজড (memoized) চিলড্রেন কম্পোনেন্টে ফাংশন পাস করার সময়
useCallbackব্যবহার করুন। - প্রতিটি ফাংশনের জন্য
useCallbackব্যবহার করবেন না।
আপনার useEffect ব্যবহারের ধরন ঠিক করুন
সবচেয়ে ভালো useEffect হলো কোনো useEffect না থাকা।
- অন্য কোনো স্টেটের ওপর ভিত্তি করে স্টেট সেট করার জন্য
useEffectব্যবহার করবেন না। - এর পরিবর্তে ডেরিভড ডেটার (derived data) জন্য
useMemoব্যবহার করুন। - এটি রেন্ডার সংখ্যা কমায় এবং কোড আরও পরিষ্কার রাখে।
আরও স্মার্টলি লোড করুন
- কোড স্প্লিট করার জন্য
React.lazyব্যবহার করুন। - চার্ট বা ম্যাপের মতো ভারী অংশগুলো শুধুমাত্র প্রয়োজন হলেই লোড করার জন্য
Suspenseব্যবহার করুন। - এটি আপনার প্রাথমিক লোড টাইম উন্নত করে।
বড় ডেটা ম্যানেজ করুন
- একসাথে ২০,০০০ আইটেম রেন্ডার করবেন না।
- লিস্ট ভার্চুয়ালাইজ করার জন্য
react-window-এর মতো লাইব্রেরি ব্যবহার করুন। - এটি নিশ্চিত করে যে ব্যবহারকারী স্ক্রিনে যা দেখছেন শুধুমাত্র সেটুকুই রেন্ডার হচ্ছে।
অ্যাসেট এবং স্টেট অপ্টিমাইজ করুন
- ইমেজের জন্য WebP বা AVIF ব্যবহার করুন।
- যে ইমেজগুলো এখনও স্ক্রিনে আসেনি সেগুলোকে লেজি লোড (lazy load) করুন।
- যে ভ্যালুগুলোর জন্য UI আপডেট করার প্রয়োজন নেই সেগুলোর জন্য
useRefব্যবহার করুন। - স্টেট কমানো মানে রেন্ডার কমানো।
নেটওয়ার্ক ট্রাফিক নিয়ন্ত্রণ করুন
- সার্চ বারের জন্য debouncing ব্যবহার করুন যাতে অনবরত API কল না হয়।
- ডেটা পুনরায় ব্যবহার করতে এবং সার্ভারের লোড কমাতে ক্যাশিং লাইব্রেরি ব্যবহার করুন।
গোল্ডেন রুল
অপ্টিমাইজ করার আগে পরিমাপ (measure) করুন।
React DevTools Profilerব্যবহার করুন।- আসল বটলেনেক (bottlenecks) খুঁজে পেতে
Lighthouseব্যবহার করুন। - যে কোড ইতিমধ্যে দ্রুত কাজ করছে তা অপ্টিমাইজ করার প্রয়োজন নেই।
অপ্টিমাইজেশন হলো সরলতার বিষয়। প্রথমে প্রেডিক্টেবল (predictable) কোড লিখুন। দ্বিতীয়ত পরিমাপ করুন। সবশেষে অপ্টিমাইজ করুন।