রিয়্যাক্ট মেমো: গ্লোবাল অ্যাপ্লিকেশনের জন্য অপটিমাইজেশন কৌশলের গভীর বিশ্লেষণ

রিয়্যাক্ট হলো ইউজার ইন্টারফেস তৈরির জন্য একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, কিন্তু অ্যাপ্লিকেশনগুলির জটিলতা বাড়ার সাথে সাথে পারফরম্যান্স অপটিমাইজেশন অত্যন্ত গুরুত্বপূর্ণ হয়ে ওঠে। রিয়্যাক্ট অপটিমাইজেশন টুলকিটের একটি অপরিহার্য টুল হলো React.memo। এই ব্লগ পোস্টটি বিশ্বব্যাপী দর্শকদের জন্য উচ্চ-পারফরম্যান্স রিয়্যাক্ট অ্যাপ্লিকেশন তৈরি করতে React.memo এবং সম্পর্কিত কৌশলগুলি বোঝা এবং কার্যকরভাবে ব্যবহার করার জন্য একটি বিস্তারিত গাইড প্রদান করে।

React.memo কী?

React.memo হলো একটি হাইয়ার-অর্ডার কম্পোনেন্ট (HOC) যা একটি ফাংশনাল কম্পোনেন্টকে মেমোাইজ করে। সহজ ভাষায়, এটি একটি কম্পোনেন্টকে পুনরায় রেন্ডার হওয়া থেকে বিরত রাখে যদি তার প্রপস (props) পরিবর্তন না হয়। ডিফল্টরূপে, এটি প্রপসের একটি শ্যালো কম্প্যারিসন (shallow comparison) করে। এটি পারফরম্যান্স উল্লেখযোগ্যভাবে উন্নত করতে পারে, বিশেষ করে সেইসব কম্পোনেন্টের জন্য যেগুলি রেন্ডার করতে কম্পিউটেশনালি ব্যয়বহুল বা যেগুলি তাদের প্রপস একই থাকা সত্ত্বেও ঘন ঘন পুনরায় রেন্ডার হয়।

কল্পনা করুন একটি কম্পোনেন্ট যা একজন ব্যবহারকারীর প্রোফাইল প্রদর্শন করছে। যদি ব্যবহারকারীর তথ্য (যেমন, নাম, অবতার) পরিবর্তন না হয়, তাহলে কম্পোনেন্টটি পুনরায় রেন্ডার করার কোনো প্রয়োজন নেই। React.memo আপনাকে এই অপ্রয়োজনীয় রি-রেন্ডার এড়িয়ে যেতে দেয়, যা মূল্যবান প্রসেসিং সময় বাঁচায়।

কেন React.memo ব্যবহার করবেন?

React.memo ব্যবহারের মূল সুবিধাগুলি এখানে দেওয়া হলো:

• পারফরম্যান্স উন্নতি: অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করে, যা দ্রুত এবং মসৃণ ইউজার ইন্টারফেসের দিকে নিয়ে যায়।
• সিপিইউ ব্যবহার হ্রাস: কম রি-রেন্ডার মানে কম সিপিইউ ব্যবহার, যা বিশেষ করে মোবাইল ডিভাইস এবং সীমিত ব্যান্ডউইথযুক্ত এলাকার ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ।
• উন্নত ব্যবহারকারীর অভিজ্ঞতা: একটি অধিক প্রতিক্রিয়াশীল অ্যাপ্লিকেশন একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করে, বিশেষ করে ধীরগতির ইন্টারনেট সংযোগ বা পুরোনো ডিভাইসের ব্যবহারকারীদের জন্য।

React.memo-এর প্রাথমিক ব্যবহার

React.memo ব্যবহার করা খুবই সহজ। কেবল আপনার ফাংশনাল কম্পোনেন্টটিকে এটি দিয়ে র‍্যাপ করুন:

import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent রেন্ডার হয়েছে');
 return (
 
{props.data}
 );
};

export default React.memo(MyComponent);

এই উদাহরণে, MyComponent শুধুমাত্র তখনই রি-রেন্ডার হবে যদি data প্রপটি পরিবর্তন হয়। console.log স্টেটমেন্টটি আপনাকে যাচাই করতে সাহায্য করবে যে কম্পোনেন্টটি আসলে কখন রি-রেন্ডার হচ্ছে।

শ্যাডো কম্প্যারিসন বোঝা

ডিফল্টরূপে, React.memo প্রপসগুলির একটি শ্যাডো কম্প্যারিসন করে। এর মানে হলো এটি পরীক্ষা করে যে প্রপসের রেফারেন্সগুলি পরিবর্তন হয়েছে কিনা, তাদের মানগুলি নয়। অবজেক্ট এবং অ্যারে নিয়ে কাজ করার সময় এটি বোঝা গুরুত্বপূর্ণ।

নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

import React, { useState } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent রেন্ডার হয়েছে');
 return (
 
{props.data.name}
 );
};

const MemoizedComponent = React.memo(MyComponent);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user }); // একই মান দিয়ে একটি নতুন অবজেক্ট তৈরি করা হচ্ছে
 };

 return (
 

 
 Update User
 
 );
};

export default App;

এই ক্ষেত্রে, যদিও user অবজেক্টের মানগুলি (name এবং age) একই থাকে, handleClick ফাংশনটি যতবার কল করা হয় ততবার একটি নতুন অবজেক্ট রেফারেন্স তৈরি করে। তাই, React.memo দেখবে যে data প্রপটি পরিবর্তিত হয়েছে (কারণ অবজেক্টের রেফারেন্স ভিন্ন) এবং MyComponent-কে পুনরায় রেন্ডার করবে।

কাস্টম কম্প্যারিসন ফাংশন

অবজেক্ট এবং অ্যারের সাথে শ্যাডো কম্প্যারিসনের সমস্যা সমাধানের জন্য, React.memo আপনাকে তার দ্বিতীয় আর্গুমেন্ট হিসাবে একটি কাস্টম কম্প্যারিসন ফাংশন প্রদান করার অনুমতি দেয়। এই ফাংশনটি দুটি আর্গুমেন্ট নেয়: prevProps এবং nextProps। এটি true রিটার্ন করবে যদি কম্পোনেন্টটির পুনরায় রেন্ডার করা *উচিত নয়* (অর্থাৎ, প্রপসগুলি কার্যকরভাবে একই) এবং false রিটার্ন করবে যদি এটি পুনরায় রেন্ডার করা উচিত।

পূর্ববর্তী উদাহরণে আপনি কীভাবে একটি কাস্টম কম্প্যারিসন ফাংশন ব্যবহার করতে পারেন তা এখানে দেখানো হলো:

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

const MyComponent = (props) => {
 console.log('MyComponent রেন্ডার হয়েছে');
 return (
 
{props.data.name}
 );
};

const areEqual = (prevProps, nextProps) => {
 return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};

const MemoizedComponent = memo(MyComponent, areEqual);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user });
 };

 return (
 

 
 Update User
 
 );
};

export default App;

এই আপডেট করা উদাহরণে, areEqual ফাংশনটি user অবজেক্টের name এবং age প্রপার্টিগুলির তুলনা করে। MemoizedComponent এখন শুধুমাত্র তখনই রি-রেন্ডার হবে যদি name বা age পরিবর্তন হয়।

কখন React.memo ব্যবহার করবেন

React.memo নিম্নলিখিত ক্ষেত্রে সবচেয়ে কার্যকর:

• যেসব কম্পোনেন্ট ঘন ঘন একই প্রপস পায়: যদি কোনো কম্পোনেন্টের প্রপস খুব কমই পরিবর্তিত হয়, তাহলে React.memo ব্যবহার করে অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করা যেতে পারে।
• যেসব কম্পোনেন্ট রেন্ডার করতে কম্পিউটেশনালি ব্যয়বহুল: যেসব কম্পোনেন্ট জটিল গণনা করে বা প্রচুর পরিমাণে ডেটা রেন্ডার করে, সেগুলির জন্য রি-রেন্ডার এড়িয়ে যাওয়া পারফরম্যান্সকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।
• পিওর ফাংশনাল কম্পোনেন্ট: যেসব কম্পোনেন্ট একই ইনপুটের জন্য একই আউটপুট তৈরি করে, সেগুলি React.memo-এর জন্য আদর্শ।

তবে, এটি মনে রাখা গুরুত্বপূর্ণ যে React.memo কোনো জাদুকরী সমাধান নয়। নির্বিচারে এটি ব্যবহার করলে আসলে পারফরম্যান্সের ক্ষতি হতে পারে কারণ শ্যাডো কম্প্যারিসনের নিজেরও একটি খরচ আছে। তাই, আপনার অ্যাপ্লিকেশনকে প্রোফাইল করা এবং মেমোাইজেশন থেকে সবচেয়ে বেশি উপকৃত হবে এমন কম্পোনেন্টগুলি সনাক্ত করা অত্যন্ত গুরুত্বপূর্ণ।

React.memo-এর বিকল্প

যদিও React.memo একটি শক্তিশালী টুল, এটি রিয়্যাক্ট কম্পোনেন্টের পারফরম্যান্স অপ্টিমাইজ করার একমাত্র বিকল্প নয়। এখানে কিছু বিকল্প এবং পরিপূরক কৌশল রয়েছে:

১. PureComponent

ক্লাস কম্পোনেন্টের জন্য, PureComponent React.memo-এর মতোই কার্যকারিতা প্রদান করে। এটি প্রপস এবং স্টেট উভয়ের একটি শ্যাডো কম্প্যারিসন করে এবং শুধুমাত্র পরিবর্তন হলেই রি-রেন্ডার করে।

import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent রেন্ডার হয়েছে');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

PureComponent হলো ম্যানুয়ালি shouldComponentUpdate প্রয়োগ করার একটি সুবিধাজনক বিকল্প, যা ক্লাস কম্পোনেন্টে অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধের पारंपरिक উপায় ছিল।

২. shouldComponentUpdate

shouldComponentUpdate ক্লাস কম্পোনেন্টের একটি লাইফসাইকেল মেথড যা আপনাকে একটি কম্পোনেন্টের পুনরায় রেন্ডার করা উচিত কিনা তা নির্ধারণের জন্য কাস্টম লজিক সংজ্ঞায়িত করতে দেয়। এটি সবচেয়ে বেশি নমনীয়তা প্রদান করে, তবে এর জন্য আরও বেশি ম্যানুয়াল প্রচেষ্টা প্রয়োজন।

import React from 'react';

class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
 return nextProps.data !== this.props.data;
 }

 render() {
 console.log('MyComponent রেন্ডার হয়েছে');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

যদিও shouldComponentUpdate এখনও উপলব্ধ, PureComponent এবং React.memo সাধারণত তাদের সরলতা এবং ব্যবহারের সহজতার জন্য বেশি পছন্দ করা হয়।

৩. useCallback

useCallback একটি রিয়্যাক্ট হুক যা একটি ফাংশনকে মেমোাইজ করে। এটি ফাংশনের একটি মেমোাইজড সংস্করণ রিটার্ন করে যা শুধুমাত্র তার কোনো একটি ডিপেন্ডেন্সি পরিবর্তন হলেই পরিবর্তিত হয়। এটি মেমোাইজড কম্পোনেন্টগুলিতে কলব্যাককে প্রপস হিসাবে পাস করার জন্য বিশেষভাবে কার্যকর।

নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

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

const MyComponent = (props) => {
 console.log('MyComponent রেন্ডার হয়েছে');
 return (
 Click Me
 );
};

const MemoizedComponent = memo(MyComponent);

const App = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
 setCount(count + 1);
 }, [count]);

 return (
 

 
 
Count: {count}
 
 );
};

export default App;

এই উদাহরণে, useCallback নিশ্চিত করে যে handleClick ফাংশনটি শুধুমাত্র count স্টেট পরিবর্তন হলেই পরিবর্তিত হয়। useCallback ছাড়া, App-এর প্রতিটি রেন্ডারে একটি নতুন ফাংশন তৈরি হবে, যার ফলে MemoizedComponent অপ্রয়োজনে পুনরায় রেন্ডার হবে।

৪. useMemo

useMemo একটি রিয়্যাক্ট হুক যা একটি মানকে মেমোাইজ করে। এটি একটি মেমোাইজড মান রিটার্ন করে যা শুধুমাত্র তার কোনো একটি ডিপেন্ডেন্সি পরিবর্তন হলেই পরিবর্তিত হয়। এটি ব্যয়বহুল গণনা এড়ানোর জন্য দরকারী যা প্রতিটি রেন্ডারে পুনরায় চালানোর প্রয়োজন নেই।

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

const App = () => {
 const [input, setInput] = useState('');

 const expensiveCalculation = (str) => {
 console.log('গণনা করা হচ্ছে...');
 let result = 0;
 for (let i = 0; i < str.length * 1000000; i++) {
 result++;
 }
 return result;
 };

 const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);

 return (
 

  setInput(e.target.value)} />
 
Result: {memoizedResult}
 
 );
};

export default App;

এই উদাহরণে, useMemo নিশ্চিত করে যে expensiveCalculation ফাংশনটি শুধুমাত্র input স্টেট পরিবর্তন হলেই কল করা হয়। এটি প্রতিটি রেন্ডারে গণনা পুনরায় চালানো প্রতিরোধ করে, যা পারফরম্যান্সকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।

গ্লোবাল অ্যাপ্লিকেশনের জন্য ব্যবহারিক উদাহরণ

আসুন কিছু ব্যবহারিক উদাহরণ বিবেচনা করা যাক যেখানে React.memo এবং সম্পর্কিত কৌশলগুলি গ্লোবাল অ্যাপ্লিকেশনগুলিতে প্রয়োগ করা যেতে পারে:

১. ভাষা নির্বাচক

একটি ভাষা নির্বাচক কম্পোনেন্ট প্রায়শই উপলব্ধ ভাষাগুলির একটি তালিকা রেন্ডার করে। তালিকাটি তুলনামূলকভাবে স্থির হতে পারে, যার অর্থ এটি ঘন ঘন পরিবর্তন হয় না। React.memo ব্যবহার করে ভাষা নির্বাচককে অপ্রয়োজনে পুনরায় রেন্ডার হওয়া থেকে বিরত রাখা যায় যখন অ্যাপ্লিকেশনের অন্যান্য অংশ আপডেট হয়।

import React, { memo } from 'react';

const LanguageItem = ({ language, onSelect }) => {
 console.log(`LanguageItem ${language} রেন্ডার হয়েছে`);
 return (
 
 onSelect(language)}>{language}
 );
};

const MemoizedLanguageItem = memo(LanguageItem);

const LanguageSelector = ({ languages, onSelect }) => {
 return (
 

 {languages.map((language) => (
 
 ))}
 
 );
};

export default LanguageSelector;

এই উদাহরণে, MemoizedLanguageItem শুধুমাত্র তখনই রি-রেন্ডার হবে যদি language বা onSelect প্রপ পরিবর্তন হয়। এটি বিশেষত উপকারী হতে পারে যদি ভাষার তালিকা দীর্ঘ হয় বা onSelect হ্যান্ডলার জটিল হয়।

২. মুদ্রা রূপান্তরকারী

একটি মুদ্রা রূপান্তরকারী কম্পোনেন্ট মুদ্রা এবং তাদের বিনিময় হারের একটি তালিকা প্রদর্শন করতে পারে। বিনিময় হার পর্যায়ক্রমে আপডেট হতে পারে, কিন্তু মুদ্রার তালিকা তুলনামূলকভাবে স্থিতিশীল থাকতে পারে। React.memo ব্যবহার করে বিনিময় হার আপডেট হওয়ার সময় মুদ্রা তালিকাকে অপ্রয়োজনে পুনরায় রেন্ডার হওয়া থেকে বিরত রাখা যায়।

import React, { memo } from 'react';

const CurrencyItem = ({ currency, rate, onSelect }) => {
 console.log(`CurrencyItem ${currency} রেন্ডার হয়েছে`);
 return (
 
 onSelect(currency)}>{currency} - {rate}
 );
};

const MemoizedCurrencyItem = memo(CurrencyItem);

const CurrencyConverter = ({ currencies, onSelect }) => {
 return (
 

 {Object.entries(currencies).map(([currency, rate]) => (
 
 ))}
 
 );
};

export default CurrencyConverter;

এই উদাহরণে, MemoizedCurrencyItem শুধুমাত্র তখনই রি-রেন্ডার হবে যদি currency, rate, বা onSelect প্রপ পরিবর্তন হয়। এটি পারফরম্যান্স উন্নত করতে পারে যদি মুদ্রার তালিকা দীর্ঘ হয় বা বিনিময় হারের আপডেট ঘন ঘন হয়।

৩. ব্যবহারকারীর প্রোফাইল প্রদর্শন

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

import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile রেন্ডার হয়েছে');
 return (
 

 
{user.name}
 
 
{user.bio}
 
 );
};

export default memo(UserProfile);

এটি বিশেষত সহায়ক যদি `UserProfile` একটি বৃহত্তর, ঘন ঘন আপডেট হওয়া ড্যাশবোর্ড বা অ্যাপ্লিকেশনের অংশ হয় যেখানে ব্যবহারকারীর ডেটা নিজেই প্রায়শই পরিবর্তন হয় না।

সাধারণ সমস্যা এবং সেগুলি এড়ানোর উপায়

যদিও React.memo একটি মূল্যবান অপটিমাইজেশন টুল, সাধারণ সমস্যা এবং সেগুলি এড়ানোর উপায় সম্পর্কে সচেতন থাকা গুরুত্বপূর্ণ:

• অতিরিক্ত-মেমোাইজেশন: নির্বিচারে React.memo ব্যবহার করলে আসলে পারফরম্যান্সের ক্ষতি হতে পারে কারণ শ্যাডো কম্প্যারিসনের নিজেরও একটি খরচ আছে। শুধুমাত্র সেইসব কম্পোনেন্ট মেমোাইজ করুন যা থেকে উপকৃত হওয়ার সম্ভাবনা আছে।
• ভুল ডিপেন্ডেন্সি অ্যারে: useCallback এবং useMemo ব্যবহার করার সময়, নিশ্চিত করুন যে আপনি সঠিক ডিপেন্ডেন্সি অ্যারে প্রদান করছেন। ডিপেন্ডেন্সি বাদ দেওয়া বা অপ্রয়োজনীয় ডিপেন্ডেন্সি অন্তর্ভুক্ত করা অপ্রত্যাশিত আচরণ এবং পারফরম্যান্স সমস্যার কারণ হতে পারে।
• প্রপস পরিবর্তন করা: সরাসরি প্রপস পরিবর্তন করা এড়িয়ে চলুন, কারণ এটি React.memo-এর শ্যাডো কম্প্যারিসনকে বাইপাস করতে পারে। প্রপস আপডেট করার সময় সর্বদা নতুন অবজেক্ট বা অ্যারে তৈরি করুন।
• জটিল কম্প্যারিসন লজিক: কাস্টম কম্প্যারিসন ফাংশনে জটিল কম্প্যারিসন লজিক এড়িয়ে চলুন, কারণ এটি React.memo-এর পারফরম্যান্স সুবিধাগুলিকে বাতিল করে দিতে পারে। কম্প্যারিসন লজিক যতটা সম্ভব সহজ এবং দক্ষ রাখুন।

আপনার অ্যাপ্লিকেশন প্রোফাইলিং করা

React.memo আসলে পারফরম্যান্স উন্নত করছে কিনা তা নির্ধারণ করার সেরা উপায় হল আপনার অ্যাপ্লিকেশন প্রোফাইল করা। রিয়্যাক্ট প্রোফাইলিংয়ের জন্য বেশ কয়েকটি টুল সরবরাহ করে, যার মধ্যে রয়েছে React DevTools Profiler এবং React.Profiler API।

React DevTools Profiler আপনাকে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স ট্রেস রেকর্ড করতে এবং ঘন ঘন রি-রেন্ডার হওয়া কম্পোনেন্টগুলি সনাক্ত করতে দেয়। React.Profiler API আপনাকে প্রোগ্রাম্যাটিকভাবে নির্দিষ্ট কম্পোনেন্টের রেন্ডার সময় পরিমাপ করতে দেয়।

আপনার অ্যাপ্লিকেশন প্রোফাইল করে, আপনি মেমোাইজেশন থেকে সবচেয়ে বেশি উপকৃত হবে এমন কম্পোনেন্টগুলি সনাক্ত করতে পারেন এবং নিশ্চিত করতে পারেন যে React.memo আসলে পারফরম্যান্স উন্নত করছে।

উপসংহার

React.memo রিয়্যাক্ট কম্পোনেন্টের পারফরম্যান্স অপটিমাইজ করার জন্য একটি শক্তিশালী টুল। অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করে, এটি আপনার অ্যাপ্লিকেশনগুলির গতি এবং প্রতিক্রিয়াশীলতা উন্নত করতে পারে, যা একটি উন্নত ব্যবহারকারীর অভিজ্ঞতার দিকে নিয়ে যায়। তবে, React.memo বিচক্ষণতার সাথে ব্যবহার করা এবং আপনার অ্যাপ্লিকেশনকে প্রোফাইল করে নিশ্চিত করা গুরুত্বপূর্ণ যে এটি আসলে পারফরম্যান্স উন্নত করছে।

এই ব্লগ পোস্টে আলোচিত ধারণা এবং কৌশলগুলি বোঝার মাধ্যমে, আপনি বিশ্বব্যাপী দর্শকদের জন্য উচ্চ-পারফরম্যান্স রিয়্যাক্ট অ্যাপ্লিকেশন তৈরি করতে React.memo এবং সম্পর্কিত কৌশলগুলি কার্যকরভাবে ব্যবহার করতে পারেন, নিশ্চিত করে যে আপনার অ্যাপ্লিকেশনগুলি সারা বিশ্বের ব্যবহারকারীদের জন্য দ্রুত এবং প্রতিক্রিয়াশীল।

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

আরও পড়ার জন্য এবং রিসোর্স

• React.memo ডকুমেন্টেশন
• useCallback ডকুমেন্টেশন
• useMemo ডকুমেন্টেশন
• রিয়্যাক্টে পারফরম্যান্স অপটিমাইজ করা
• রিয়্যাক্ট প্রোফাইলার দিয়ে কম্পোনেন্ট প্রোফাইলিং করা