Performance Optimization in React memo

এই লেসনে আমরা রিয়াক্ট অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার তিনটি গুরুত্বপূর্ণ পদ্ধতি শিখবো:

1. memo API
2. useCallback Hook
3. useMemo Hook

এই তিনটি পদ্ধতি আমাদের কম্পোনেন্ট রি-রেন্ডারিং (বারবার কম্পোনেন্ট পুনরায় তৈরি হওয়া) নিয়ন্ত্রণ করে অ্যাপ্লিকেশনকে দ্রুততর করে তুলতে সাহায্য করে।

কি কারণে কম্পোনেন্ট রি-রেন্ডার হয়?

আমরা জানি, রিয়েক্টে যখনই কোনো কম্পোনেন্টে কিছু পরিবর্তন হয়, তখন সেটি রি-রেন্ডার হয়। আর এ পরিবর্তন হতে পারে:

1. Props Change হলে: যদি কম্পোনেন্টের প্রপস পরিবর্তিত হয়, তাহলে কম্পোনেন্ট রি-রেন্ডার হয়।
2. State Change হলে: যদি কম্পোনেন্টের স্টেট পরিবর্তিত হয়, তাহলেও রি-রেন্ডার হয়।
3. Parent কম্পোনেন্ট রি-রেন্ডার হলে: যখন প্যারেন্ট কম্পোনেন্টের স্টেট বা প্রপস পরিবর্তিত হয়, তখন তার নিচের সব চাইল্ড কম্পোনেন্টও রি-রেন্ডার হয়।

এখন, প্রথম দুইটা যে কারণে রি-রেন্ডার হচ্ছে, সেগুলো মেনে নিতে হবে। কিন্তু তৃতীয়টা নিয়ে একটু কথা বলবো।

memo কেন প্রয়োজন?

ধরো, তোমার একটা কম্পোনেন্ট আছে, যেটি প্যারেন্ট কম্পোনেন্টের স্টেট চেঞ্জ হওয়ার কারণে বার বার রি-রেন্ডার হয়ে যাচ্ছে, কিন্তু তোমার ওই কম্পোনেন্টের কোনো কিছু পরিবর্তন হচ্ছে না। তাহলে কী হবে? প্রতিবার রি-রেন্ডার হওয়ার কারণে পারফরম্যান্স খারাপ হবে।

তাহলে কী করা যায়?

memo API ব্যবহার করে আমরা এই সমস্যা সমাধান করতে পারি।

কীভাবে memo কাজ করে?

এটা খুব সহজ। যখন তুমি memo ব্যবহার করবে, রিয়েক্টে এই কম্পোনেন্টটির রি-রেন্ডার কেবল তখনই হবে যখন এর props পরিবর্তিত হবে। যদি props আগের মতো থাকে, তাহলে কম্পোনেন্ট আর রি-রেন্ডার হবে না।

কীভাবে memo ব্যবহার করবে?

ধরা যাক, তোমার একটা কম্পোনেন্ট আছে যেটি প্যারেন্ট কম্পোনেন্টের স্টেট চেঞ্জের কারণে বার বার রি-রেন্ডার হচ্ছে। সেটা যদি অপ্রয়োজনীয় হয়, তাহলে তুমি memo ব্যবহার করে তাকে রি-রেন্ডার থেকে বাঁচাতে পারো।

মেমো ছাড়া:

import React from "react";
 
const MyComponent = () => {
    return (
        <div>
            <h1>
                This component keeps re-rendering when the parent's state changes.
            </h1>
        </div>
    );
};
 
export default MyComponent;

এখানে, প্যারেন্ট কম্পোনেন্টের স্টেট চেঞ্জ হলে এই কম্পোনেন্ট বার বার রি-রেন্ডার হবে, কিন্তু এখানে তো কোনো পরিবর্তন হচ্ছে না, তাই অপ্রয়োজনীয় রি-রেন্ডার হবে।

মেমো ব্যবহার করে:

import { memo } from "react";
 
const MyComponent = () => {
    return (
        <div>
            <h1>
                This component keeps re-rendering when the parent's state changes.
            </h1>
        </div>
    );
};
 
export default memo(MyComponent);

এখন, তুমি যেহেতু memo ব্যবহার করেছো, তাহলে MyComponent শুধুমাত্র তখনই রি-রেন্ডার হবে যখন এর props পরিবর্তিত হবে। প্যারেন্ট কম্পোনেন্টের স্টেট চেঞ্জ হলেও যদি প্রপস একই থাকে, তাহলে কম্পোনেন্ট আর রি-রেন্ডার হবে না।

memo কেন কাজে আসে?

১. পারফরম্যান্স ইমপ্রুভমেন্ট: যদি কোনো কম্পোনেন্ট বার বার রি-রেন্ডার হয় এবং সেটা পারফরম্যান্সে প্রভাব ফেলে, তাহলে memo তাকে রি-রেন্ডার হতে বাধা দেয়। ২. অপ্রয়োজনীয় রি-রেন্ডার কমানো: যদি কোনো কম্পোনেন্টের কাজ প্রতিবার একই থাকে, তাহলে memo ব্যবহার করে সেই কম্পোনেন্টকে পুনরায় রেন্ডার হতে বাধা দিতে পারো।

কখন memo ব্যবহার করবেন না?

• যখন ছোট কম্পোনেন্ট: যদি কম্পোনেন্ট খুব ছোট এবং খুব সহজ হয়, আর সেটি রি-রেন্ডার হওয়া তেমন কোনো সমস্যা তৈরি না করে, তখন memo ব্যবহার না করাই ভালো। এতে বেশি লাভ হবে না।
• যদি প্রপস পরিবর্তন হয় বার বার: যদি প্রপস প্রতিবারই পরিবর্তিত হয়, তাহলে memo ব্যবহার করার থেকে কোনো লাভ হবে না।

তুমি যদি দেখতে পাও যে, তোমার কম্পোনেন্ট অপ্রয়োজনীয় রি-রেন্ডার হয়ে পারফরম্যান্স খারাপ করছে, তাহলে memo ব্যবহার করে সেটা ফিক্স করতে পারো। এটা তোমার কম্পোনেন্টকে শুধুমাত্র তখন রি-রেন্ডার করবে যখন তার প্রপস পরিবর্তিত হবে।

পার্থক্য সংক্ষেপে

এই তিনটি কৌশল সঠিকভাবে প্রয়োগ করলে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত হবে এবং অপ্রয়োজনীয় রি-রেন্ডার থেকে মুক্তি পাবেন। 😊