useCallback এবং useMemo Hook এর মাধ্যমে Performance টিউনিং

ReactJS-এ performance optimization একটি গুরুত্বপূর্ণ বিষয়, বিশেষ করে বড় এবং কমপ্লেক্স অ্যাপ্লিকেশনগুলোতে যেখানে স্টেট এবং রেন্ডারিং প্রক্রিয়া অনেক বেশি হতে পারে। useCallback এবং useMemo হুক দুটি পারফরম্যান্স অপটিমাইজেশনের জন্য ব্যবহৃত হয়, যাতে কম্পোনেন্টের অপ্রয়োজনীয় রেন্ডারিং এবং ফাংশন ক্রিয়েশন কমানো যায়। এই দুটি হুক আপনাকে পারফরম্যান্স বাড়ানোর জন্য React-এ কার্যকরভাবে ডেটা মেমোরাইজ করতে সাহায্য করে।

useMemo Hook কী?

useMemo হুকটি React-এ একটি মেমোরাইজেশন কৌশল হিসেবে কাজ করে, যেখানে একটি নির্দিষ্ট কম্পিউটেড ভ্যালু শুধুমাত্র তখনই রি-ক্যালকুলেট করা হয় যখন তার নির্ভরশীলতা পরিবর্তিত হয়। এটি প্রাথমিকভাবে গণনা (computation) ব্যয়বহুল কোনো অপারেশন থেকে পারফরম্যান্স অপটিমাইজেশন করতে ব্যবহৃত হয়।

Syntax:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

এখানে:

• useMemo প্রথম আর্গুমেন্ট হিসেবে একটি ফাংশন নেয়, যা গণনা করে একটি মেমোরাইজড মান রিটার্ন করে।
• দ্বিতীয় আর্গুমেন্ট হিসেবে নির্ভরশীলতা (dependencies) অ্যারে দেওয়া হয়। যখন কোনো নির্ভরশীলতা পরিবর্তিত হয়, তখন useMemo হুকটি পুনরায় গণনা করে।

উদাহরণ:

ধরা যাক, আপনার একটি লিস্ট এবং একটি অনুসন্ধান ফাংশন আছে, এবং এটি শুধুমাত্র তখনই রি-রেন্ডার হবে যখন অনুসন্ধানের শর্ত পরিবর্তিত হবে।

import React, { useState, useMemo } from 'react';

function SearchableList({ items, searchQuery }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(searchQuery));
  }, [items, searchQuery]); // Only recompute when 'items' or 'searchQuery' changes

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

এখানে, filteredItems শুধুমাত্র তখনই পুনরায় গণনা করা হবে যখন items অথবা searchQuery পরিবর্তিত হবে। যদি শুধুমাত্র অন্য কোনো স্টেট পরিবর্তিত হয়, তবে useMemo কম্পিউটেশনটি পুনরায় করা হবে না, ফলে পারফরম্যান্স ভালো থাকে।

useMemo এর সুবিধা:

• গণনা ব্যয়বহুল অপারেশন গুলোকে রি-ক্যালকুলেট করা কমিয়ে দেয়।
• ডিপেনডেন্সি চেকিংয়ের মাধ্যমে পারফরম্যান্স অপটিমাইজেশন করা হয়।
• কম্পোনেন্ট রেন্ডারিংয়ের সংখ্যা কমিয়ে দেয়।

useCallback Hook কী?

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

Syntax:

const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

এখানে:

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

উদাহরণ:

ধরা যাক, আপনি একটি বাটন ক্লিক ফাংশন তৈরি করতে চান এবং এটি একটি চাইল্ড কম্পোনেন্টে পাস করবেন।

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // The function will not be recreated unless the dependencies change.

  return <ChildComponent onIncrement={increment} />;
}

function ChildComponent({ onIncrement }) {
  console.log('Child re-rendered');
  return <button onClick={onIncrement}>Increment</button>;
}

এখানে:

• increment ফাংশনটি useCallback দ্বারা মেমোরাইজড করা হয়েছে।
• প্যারেন্ট কম্পোনেন্টে increment ফাংশন বারবার রি-ক্রীএট না হয়ে, শুধুমাত্র একবার তৈরি হবে যদি তার নির্ভরশীলতা পরিবর্তিত না হয়।

useCallback এর সুবিধা:

• ফাংশনগুলি বারবার তৈরি হওয়া থেকে রক্ষা করে, যা বিশেষত বড় অ্যাপ্লিকেশনে পারফরম্যান্স অপটিমাইজেশনে সহায়ক।
• চাইল্ড কম্পোনেন্টে প্রপস হিসেবে ফাংশন পাস করার সময় অপ্রয়োজনীয় রি-রেন্ডারিং কমায়।
• React.memo এবং PureComponent এর সাথে ব্যবহৃত হলে আরও বেশি কার্যকর।

useMemo এবং useCallback এর মধ্যে পার্থক্য:

সারাংশ

React-এ useMemo এবং useCallback হুকগুলি পারফরম্যান্স টিউনিংয়ের জন্য অপরিহার্য টুল। useMemo কস্টলি গণনাগুলোকে মেমোরাইজ করতে এবং useCallback পুনরায় ফাংশন ক্রিয়েশন কমাতে ব্যবহৃত হয়। এই হুকগুলো ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনের অপ্রয়োজনীয় রেন্ডারিং কমাতে এবং পারফরম্যান্স অপটিমাইজ করতে সক্ষম হবেন।