ReactJS-এ memoization একটি অপটিমাইজেশন কৌশল যা ফাংশনাল কম্পোনেন্টের অপ্রয়োজনীয় রেন্ডারিং রোধ করতে ব্যবহৃত হয়। এটি মূলত এমন একটি কৌশল, যেখানে কোনো কম্পোনেন্ট শুধুমাত্র যখন প্রপ্স বা স্টেট পরিবর্তিত হয় তখনই রেন্ডার হয়। এতে পারফরম্যান্স উন্নত হয়, বিশেষত বড় অ্যাপ্লিকেশনগুলোতে যেখানে একাধিক কম্পোনেন্ট রেন্ডার হতে থাকে।
ReactJS-এ React.memo একটি হাইঅর্ডার কম্পোনেন্ট (Higher Order Component, HOC) যা ফাংশনাল কম্পোনেন্টের মেমোাইজেশন (memoization) সহজতর করে। এটি শুধুমাত্র তখনই কম্পোনেন্ট রেন্ডার করে যখন তার প্রপ্স পরিবর্তিত হয়।
Memoization কী?
Memoization হল একটি কৌশল, যেখানে একটি ফাংশন শুধুমাত্র তখনই পুনরায় কল করা হয় যদি তার ইনপুট বা আর্গুমেন্ট পরিবর্তিত হয়। ReactJS-এ, এটি মূলত কম্পোনেন্টের পুনঃরেন্ডারিং রোধ করার জন্য ব্যবহৃত হয়। React.memo হুক ব্যবহারের মাধ্যমে, React এটি নির্ধারণ করে যে কোনো কম্পোনেন্ট যদি তার প্রপ্সের জন্য একই ভ্যালু পায়, তবে এটি পূর্বের রেন্ডার ফলাফলটি পুনরায় ব্যবহার করবে।
React.memo কী?
React.memo একটি হাইঅর্ডার কম্পোনেন্ট (HOC) যা একটি ফাংশনাল কম্পোনেন্টকে মেমোাইজ করে। এটি ফাংশনাল কম্পোনেন্টের অপ্রয়োজনীয় রেন্ডারিং বন্ধ করে, যদি কম্পোনেন্টের প্রপ্স আগের মতই থাকে। এটি শুধুমাত্র তখনই রেন্ডারিং ঘটাবে, যখন কম্পোনেন্টের প্রপ্স পরিবর্তিত হবে।
React.memo এর সিঁট্যাক্স:
const MyComponent = React.memo((props) => {
// কম্পোনেন্টের JSX রিটার্ন
return <div>{props.name}</div>;
});
এখানে, React.memo ফাংশনটি MyComponent কে রিটার্ন করবে এবং এটি শুধুমাত্র তখনই পুনরায় রেন্ডার করবে যখন props.name পরিবর্তিত হবে।
React.memo ব্যবহার করার সময়
১. প্রপ্সের অপ্রয়োজনীয় পরিবর্তন রোধ
ধরা যাক, আপনি একটি লিস্ট রেন্ডার করছেন এবং প্রতিটি লিস্ট আইটেম একটি আলাদা কম্পোনেন্ট। যদি কোনো পরিবর্তন না হয়, তবে পুরো লিস্টটি পুনরায় রেন্ডার হওয়ার প্রয়োজন নেই। এই ক্ষেত্রে React.memo ব্যবহার করে আপনি শুধুমাত্র সেই আইটেমগুলিকেই রেন্ডার করতে পারবেন যেগুলোর প্রপ্স পরিবর্তিত হয়েছে।
উদাহরণ:
import React from 'react';
const ListItem = React.memo(({ item }) => {
console.log('Rendering: ', item.name);
return <li>{item.name}</li>;
});
const List = ({ items }) => {
return (
<ul>
{items.map((item) => (
<ListItem key={item.id} item={item} />
))}
</ul>
);
};
এখানে, ListItem কম্পোনেন্টটি শুধুমাত্র তখনই রেন্ডার হবে যখন তার প্রপ্স পরিবর্তিত হবে, যা কম্পোনেন্টের পারফরম্যান্স উন্নত করবে। React.memo এখানে তালিকাভুক্ত আইটেমের মধ্যে অপ্রয়োজনীয় রেন্ডারিং কমাবে।
২. কাস্টম ইকুয়ালিটি চেক
ডিফল্টভাবে, React.memo শুধুমাত্র শ্যালো (shallow) কম্পেয়ারসন করে অর্থাৎ শুধুমাত্র প্রপ্সের উপরের স্তরের পরিবর্তন দেখবে। যদি আপনার প্রপ্সগুলি কোনো জটিল ডেটা স্ট্রাকচার যেমন অবজেক্ট বা অ্যারে হয়, তবে আপনাকে একটি কাস্টম ইকুয়ালিটি চেক (custom equality check) প্রদান করতে হতে পারে।
উদাহরণ:
const MyComponent = React.memo(
({ user }) => {
console.log("Rendering MyComponent");
return <div>{user.name}</div>;
},
(prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);
এখানে, React.memo-এর দ্বিতীয় আর্গুমেন্ট হিসেবে একটি কাস্টম কম্পেয়ার ফাংশন দেওয়া হয়েছে। এই ফাংশনটি শুধুমাত্র তখনই true রিটার্ন করবে যখন user.id অপরিবর্তিত থাকবে, অর্থাৎ user অবজেক্টের অন্যান্য প্রপ্সে কোনো পরিবর্তন ঘটলেও কম্পোনেন্ট রেন্ডার হবে না।
৩. React.memo এবং স্টেট পরিবর্তন
React.memo শুধুমাত্র প্রপ্সের উপর ভিত্তি করে কাজ করে, স্টেট পরিবর্তন হলে এটি কম্পোনেন্ট পুনরায় রেন্ডার করবে। তবে, যদি আপনি এমন কোনো কেসে থাকেন যেখানে স্টেট পরিবর্তন হলে কিছু অপটিমাইজেশন করতে চান, তবে আপনাকে অন্য স্টেট ব্যবস্থাপনা টুল বা মেমোাইজেশন কৌশল (যেমন useMemo বা useCallback) ব্যবহার করতে হতে পারে।
সারাংশ
React.memoএকটি ফাংশনাল কম্পোনেন্টকে মেমোাইজ করে, যার মাধ্যমে আপনি অপ্রয়োজনীয় রেন্ডারিং কমাতে পারেন।- এটি কম্পোনেন্টের প্রপ্স পরিবর্তিত হলে পুনরায় রেন্ডার করে এবং আগের প্রপ্স একই থাকলে তা রেন্ডার বন্ধ করে দেয়।
- আপনি কাস্টম ইকুয়ালিটি চেকও প্রদান করতে পারেন যা কিছু নির্দিষ্ট শর্তে কম্পোনেন্টের রেন্ডারিং নিয়ন্ত্রণ করে।
- এটি বড় অ্যাপ্লিকেশনগুলিতে পারফরম্যান্স উন্নত করতে সাহায্য করে।
React.memo এবং memoization কম্পোনেন্টের অপ্রয়োজনীয় রেন্ডারিং কমিয়ে অ্যাপ্লিকেশনকে দ্রুত এবং কার্যকরী করতে সহায়তা করে।
Read more
