Performance Optimization in React useCallback

useCallback কি এবং কেন প্রয়োজন?

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

তাহলে কী কারণে এটা হচ্ছে?

সমস্যা হলো, তুমি যেটা ফাংশন পাঠাচ্ছো, সেটি প্রতিবার রি-রেন্ডারে নতুন একটি ফাংশন অবজেক্ট হয়ে যাচ্ছে।

এটা কেন হচ্ছে? কারণ:

1. ফাংশন হলো একধরনের অবজেক্ট।
2. প্রতিবার রি-রেন্ডারে ফাংশনটি নতুন একটি অবজেক্ট হিসেবে তৈরি হয়, যদিও তার নাম একই থাকে।
3. যেহেতু প্রতিবার নতুন অবজেক্ট তৈরি হয়, সেহেতু memo দিয়ে র‍্যাপ করলেও, প্যারেন্ট কম্পোনেন্টের ফাংশনটি নতুনভাবে আসার কারণে চাইল্ড কম্পোনেন্ট আবারও রি-রেন্ডার হয়ে যায়।

তাহলে, এই সমস্যা থেকে মুক্তি পাওয়ার উপায় কী?

useCallback হুক ব্যবহার করা

useCallback হুক আমাদের সাহায্য করে সেই ফাংশনটি ক্যাশ বা মেমোয়াইজ করতে। এর মানে, একবার যখন ফাংশন তৈরি হয়ে যাবে, তখন সেটি পুনরায় তৈরি হবে না, যতবারই কম্পোনেন্ট রি-রেন্ডার হোক না কেন।

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

কিভাবে useCallback ব্যবহার করবো?

এখন উদাহরণ দিয়ে দেখি:

১. সাধারণভাবে ফাংশন প্রপস পাঠানো:

import React from "react";
 
const App = () => {
    const somethingFunction = () => {
        // কিছু কাজ করবে
    };
 
    return (
        <div>
            <MyComponent onChange={somethingFunction} />
        </div>
    );
};
 
export default App;

এখানে, somethingFunction একটি ফাংশন এবং আমরা সেটি MyComponent-এ প্রপ্স হিসেবে পাঠাচ্ছি। এখন, MyComponent যদি memo দিয়ে রি-রেন্ডার আটকানোর চেষ্টা করে, তাও কিন্তু somethingFunction এর নতুন রেফারেন্সের কারণে রি-রেন্ডার হতে থাকবে। কারণ প্রতিবার রি-রেন্ডারে ফাংশনটি নতুন একটি অবজেক্ট হয়ে আসছে।

২. useCallback ব্যবহার করে ক্যাশিং করা:

import React, { useCallback } from "react";
 
const App = () => {
    const somethingFunction = useCallback(() => {
        // কিছু কাজ করবে
    }, []);  // এখানে ডিপেন্ডেন্সি অ্যারে
 
    return (
        <div>
            <MyComponent onChange={somethingFunction} />
        </div>
    );
};
 
export default App;

এখন, useCallback ব্যবহার করে somethingFunction কে মেমোয়াইজ করেছি। এখানে:

1. useCallback প্রথম প্যারামিটারে যে ফাংশনটি দেবে, সেটা মেমোয়াইজ করা হবে।
2. দ্বিতীয় প্যারামিটার হলো ডিপেন্ডেন্সি অ্যারে। যখনই এই ডিপেন্ডেন্সি বদলাবে, তখনই ফাংশনটি নতুন করে তৈরি হবে। কিন্তু যদি ডিপেন্ডেন্সি চেঞ্জ না হয়, তাহলে আগের মেমোয়াইজড ফাংশনটি ব্যবহার হবে।

এটা কেন কাজ করে?

1. যেহেতু somethingFunction নতুন রেফারেন্সে আসছে না, তাই চাইল্ড কম্পোনেন্টটির প্রপ্সও আগের মতোই থাকবে।
2. এর ফলে memo এর কারণে চাইল্ড কম্পোনেন্ট রি-রেন্ডার হবে না।

useCallback কেন গুরুত্বপূর্ণ?

১. পারফরম্যান্স বাঁচায়: যখন ফাংশন প্রপ্স হিসেবে পাঠানো হয় এবং প্রতি রি-রেন্ডারে নতুন রেফারেন্সে চলে আসে, তখন অপ্রয়োজনীয় রি-রেন্ডার হয়ে যায়। useCallback দিয়ে এই সমস্যাটি আটকানো যায়।

২. memo এর সাথে ভালো কাজ করে: memo কেবল তখনই কাজ করবে যখন প্রপ্সের রেফারেন্স একই থাকবে। useCallback এর মাধ্যমে ফাংশনটি সেই একই রেফারেন্সে থাকবে, ফলে memo সঠিকভাবে কাজ করবে।

৩. কোডের কর্মদক্ষতা বাড়ায়: ডিপেন্ডেন্সি ঠিকভাবে সেট করা থাকলে, ফাংশন শুধু তখনই নতুনভাবে তৈরি হবে যখন ডিপেন্ডেন্সি চেঞ্জ করবে, অন্যথায় আগের রেফারেন্সই থাকবে।

useCallback এর কিপর্যন্ত ব্যবহার করা উচিত?

useCallback খুব শক্তিশালী একটা টুল, কিন্তু এর ব্যবহার সবসময় প্রয়োজন নেই। উদাহরণস্বরূপ:

• অল্প সাইজের কম্পোনেন্টে useCallback ব্যবহার না করাই ভালো, কারণ এতে অতিরিক্ত কন্টেক্সট ক্রিয়েট হতে পারে।
• প্রচুর ফাংশন বা বড় অ্যাপ্লিকেশন যেখানে পারফরম্যান্সের প্রভাব পরছে, সেখানে useCallback ব্যবহার করা প্রয়োজন।

উপসংহার:

এখন, তুমি যদি দেখতে পাও যে প্যারেন্ট থেকে চাইল্ডে পাঠানো ফাংশন রি-রেন্ডার ট্রিগার করছে, তাহলে useCallback দিয়ে সেই ফাংশনটি ক্যাশ করে ফেলো। এতে পারফরম্যান্সে উন্নতি হবে এবং অপ্রয়োজনীয় রি-রেন্ডার রোধ হবে।

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

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