Performance Optimization in React useMemo

React কম্পোনেন্টে বিভিন্ন ধরনের কাজ থাকে, যেগুলো ক্যালকুলেশন বা প্রসেসিংয়ের জন্য অনেক সময় নেয়, অর্থাৎ যেগুলো কস্টলি। ধরো, তোমার কম্পোনেন্টে এমন কিছু কাজ করা হচ্ছে, যা অনেক সময় নিয়ে ফিনিশ হয় বা যেগুলো বার বার করলে অনেক সিস্টেম রিসোর্স খরচ হয়, আর তুমি চাও যে, যদি সেই কাজের ফলাফল একবার ক্যালকুলেট করা হয়ে যায়, তাহলে আর বারবার সেটা ক্যালকুলেট না হয়ে, আগের ফলাফলই ব্যবহার করা হোক।

এক্ষেত্রে useMemo হুকটি খুবই উপকারী, কারণ এটি ফাংশনের রেজাল্ট ক্যাশ করে রাখে। মানে, প্রথমবার ক্যালকুলেশন হওয়ার পর সেটা স্মৃতিতে (memory) সংরক্ষণ করে রাখে, এবং পরবর্তী সময়ে কম্পোনেন্ট রি-রেন্ডার হলেও একই ক্যালকুলেশন আবার না করে আগের রেজাল্টটাই ব্যবহার করে।

আর এটা খুবই গুরুত্বপূর্ণ যখন তোমার কম্পোনেন্টে কমপ্লেক্স (complex) বা টাইম কন্সিউমিং কাজের প্রয়োজন হয়, এবং তুমি চাও পারফরম্যান্সে উন্নতি ঘটাতে। তাহলে useMemo তোমাকে সেই কাজের ফলাফল ক্যাশে রাখতে সাহায্য করবে।

কেন useMemo ব্যবহার করব?

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

কিভাবে কাজ করে useMemo?

ধরো, তোমার কাছে একটি complex calculation আছে, যেটি অনেক সময় নিয়ে ক্যালকুলেট হয়:

const complexCalculation = () => {
  let i = 0;
  while (i < 10000000) {
    // অনেক সময় নেয়
    i++;
  }
  return i % 2 === 0; // এটাই একটা কমপ্লেক্স ক্যালকুলেশন
};

এখন, এই কাজটি যদি প্রতিবার কম্পোনেন্ট রি-রেন্ডার হয়, তাহলে নতুনভাবে ক্যালকুলেট হতে থাকবে। কিন্তু useMemo ব্যবহার করলে এই ক্যালকুলেশনটি তখনই হবে, যখন ডিপেন্ডেন্সি (input value) পরিবর্তিত হবে। অর্থাৎ, তুমি যদি ঐ ক্যালকুলেশনের ফলাফল ক্যাশ করে রাখো, তাহলে যেকোনো পরিবর্তন না হলে আগের ফলাফলটাই রিটার্ন করবে।

তাহলে useMemo দিয়ে এভাবে ক্যাশিং করতে হবে:

import React, { useMemo } from "react";
 
const App = () => {
  // complexCalculation কে useMemo দিয়ে ক্যাশ করা হচ্ছে
  const result = useMemo(() => {
    let i = 0;
    while (i < 10000000) {
      i++;
    }
    return i % 2 === 0; // ক্যালকুলেশনটির ফলাফল
  }, []); // ডিপেন্ডেন্সি অ্যারে খালি থাকলে একবার হবে
 
  return (
    <div>
      {result ? "Even" : "Odd"} {/* ফলাফল দেখানো হচ্ছে */}
    </div>
  );
};
 
export default App;

এখন, এখানে কয়েকটা গুরুত্বপূর্ণ বিষয় আছে:

১. ক্যাশিং এবং রিটার্নিং

useMemo মূলত ফাংশনের ফলাফল ক্যাশ করে রাখে, ফাংশনটি নিজে নয়। অর্থাৎ, যে ফাংশনটি তুমি useMemo এর মধ্যে দিবে, সেটি প্রথমবার রান হবে, কিন্তু এর রিটার্ন (ফলাফল) মনে রাখা হবে। পরবর্তী সময়ে রি-রেন্ডার হলে, যদি কোনো ডিপেন্ডেন্সি চেঞ্জ না হয়, তাহলে ঐ ফলাফলটাই ফেরত আসবে, নতুন করে ক্যালকুলেশন হবে না।

২. ডিপেন্ডেন্সি অ্যারে

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

যেমন উপরের কোডে [ ] ডিপেন্ডেন্সি অ্যারে দেয়া হয়েছে, যার মানে হলো কম্পোনেন্ট প্রথমবার রেন্ডার হওয়ার সময় কেবল ক্যালকুলেশনটি হবে। আর পরবর্তী রেন্ডারে কোনো পরিবর্তন না হলে, আগের ফলাফলটি ব্যবহার করা হবে।

তবে যদি কিছু ডিপেন্ডেন্সি যোগ করতে চাও, ধরো todos বা tab এর উপর নির্ভর করতে চাও, তাহলে এমনভাবে করতে পারো:

const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

এখানে, visibleTodos কেবল তখনই পুনরায় ক্যালকুলেট হবে যখন todos বা tab পরিবর্তিত হবে। যদি ঐ দুটি ভ্যালুতে কোনো পরিবর্তন না হয়, তাহলে আগের ক্যাশ করা ফলাফলটাই রিটার্ন হবে।

৩. পারফরম্যান্স ইমপ্রুভমেন্ট

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

৪. useMemo কবে ব্যবহার করব?

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

৫. কখন ব্যবহার না করতে হয়?

তবে মনে রেখো, যতটুকু সম্ভব useMemo ব্যবহারে সাবধান হও। কারণ, এটা কিছু অতিরিক্ত জটিলতা সৃষ্টি করতে পারে এবং যদি ক্যালকুলেশন খুবই সাধারণ হয়, তখন হয়তো useMemo ব্যবহার করার কোনো দরকার নেই। এটাই একটা নিয়ম, যদি তোমার ক্যালকুলেশন দ্রুত হয়, তাহলে useMemo ব্যবহার না করাই ভালো।

উদাহরণ:

import React, { useMemo } from "react";
 
const ComplexComponent = ({ data }) => {
  const complexCalculation = useMemo(() => {
    let i = 0;
    while (i < 10000000) {
      i++;
    }
    return i % 2 === 0;
  }, [data]); // 'data' পরিবর্তন হলে কেবল ক্যালকুলেট হবে
 
  return <div>The result is: {complexCalculation ? "Even" : "Odd"}</div>;
};
 
export default ComplexComponent;

সারাংশ:

• useMemo একটি রিয়াক্ট হুক যা একটি ক্যালকুলেশনের ফলাফল ক্যাশে করে রাখে, এবং কেবল তখনই ক্যালকুলেট হয় যখন তার ডিপেন্ডেন্সি চেঞ্জ হয়।
• এটি পারফরম্যান্স অপটিমাইজেশন এর জন্য ব্যবহৃত হয়, যাতে অপ্রয়োজনীয় ক্যালকুলেশন না হয়ে আগের রেজাল্ট ব্যবহৃত হয়।

এটি ব্যাখ্যা করা হয়েছে যেন তুমিও খুব সহজে বুঝতে পারো, এবং যেকোনো ছোট ভাইকে বা কাউকে শেখানোর জন্য উপযুক্ত হয়!

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

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