React.js Performance Optimization – memo, useCallback, useMemo বিস্তারিত ব্যাখ্যা

React অ্যাপ বড় হলে বা অনেক Component বারবার রেন্ডার হলে অ্যাপ ধীর হয়ে যায়। এই সমস্যা সমাধানের জন্য React কিছু Performance Optimization টুল দেয়, যেমন: React.memo, useCallback, এবং useMemo. এগুলো সঠিকভাবে ব্যবহার করলে আপনার অ্যাপ আগের তুলনায় অনেক দ্রুত এবং স্মুথ হবে।

🔵 কেন Performance Optimization প্রয়োজন?

• অপ্রয়োজনীয় re-render কমাতে
• Complex calculation বারবার না করতে
• UI smooth রাখতে
• বড় অ্যাপের performance দ্রুত করতে
• অপ্রয়োজনীয় function recreate হওয়া থামাতে

1️⃣ React.memo — Component Re-render Stop

React.memo একটি Higher-Order Component যা কোনো component-এর props না বদলালে তাকে re-render হতে বাধা দেয়। এটি performance optimization-এর প্রথম ধাপ।

✔ উদাহরণ:

// Child.jsx
import React from "react";

function Child({ name }) {
  console.log("Child rendered");
  return <h3>Name: {name}</h3>;
}

export default React.memo(Child); 

// App.jsx
import { useState } from "react";
import Child from "./Child";

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <Child name="Prabir" />
    </div>
  );
}

🟢 কী হলো এখানে?

• App rerender হলেও Child component rerender হবে না
• কারণ Child-এর props পরিবর্তন হয়নি
• এটাই memo এর শক্তি!

⚠ কোন সময় React.memo ব্যবহার করবেন?

• যে Component static type UI render করে
• যে Component-এ props কম পরিবর্তন হয়
• যখন Parent component বারবার re-render হয়

2️⃣ useCallback — Function Recreate হওয়া বন্ধ

React-এ প্রতিবার component re-render হলে তার ভিতরের function গুলোও পুনরায় তৈরি হয়। এতে child component বারবার re-render হতে পারে। এই সমস্যা বন্ধ করতে আমরা useCallback ব্যবহার করি।

✔ Syntax:

const stableFunction = useCallback(() => {
   // function code
}, [dependencies]);

✔ Example:

// Parent.jsx
import { useCallback, useState } from "react";
import Button from "./Button";

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

  const handleClick = useCallback(() => {
    console.log("Clicked!");
  }, []);

  return (
    <div>
      <Button onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Parent;

// Button.jsx
function Button({ onClick }) {
  console.log("Button rendered");
  return <button onClick={onClick}>Click</button>;
}

export default React.memo(Button);

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

• useCallback function কে memoize করে রাখে
• Parent rerender হলেও function নতুন করে তৈরি হয় না
• ফলে React.memo ব্যবহার করা child rerender হয় না

⚠ কখন useCallback ব্যবহার না করাই ভালো?

• যখন Function re-render cost কম
• যখন Component ছোট ও simple
• Performance সমস্যা না থাকলে

3️⃣ useMemo — Expensive Calculation Optimization

useMemo ব্যবহার করা হয় যখন কোনো heavy বা expensive calculation আছে যা বারবার component re-render হলে করতে হয়। useMemo এই calculation কে cache করে রাখে এবং dependency না বদলালে আবার চালায় না।

✔ Syntax:

const value = useMemo(() => expensiveFunction(), [dependencies]);

✔ Example:

import { useState, useMemo } from "react";

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

  const expensiveValue = useMemo(() => {
    console.log("Expensive calculation running...");
    let total = 0;
    for (let i = 0; i < 1000000000; i++) {
      total += i;
    }
    return total;
  }, []);

  return (
    <div>
      <h3>Expensive Value: {expensiveValue}</h3>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default ExpensiveComponent;

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

• Heavy calculation পুনরায় চালানো বন্ধ করে
• UI smooth রাখে
• Performance অনেক উন্নত হয়

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

• অনর্থক জায়গায় ব্যবহার করলে উল্টো overhead তৈরি হয়
• Calculation ছোট হলে useMemo প্রয়োজন নেই

🟩 memo, useCallback, useMemo — তুলনা

🎯 Real-life ব্যবহার

• Large lists (e.g., product list)
• search filtering
• heavy calculation (salary calculation, sorting)
• child component unnecessary rendering
• API response formatting

🔵 Summary

• React.memo → Component re-render optimize
• useCallback → Function memoize করে
• useMemo → Expensive calculation optimize করে
• শুধু performance সমস্যা হলে এগুলো ব্যবহার করতে হবে

✔ এই তিনটি টুল ঠিকমতো ব্যবহার করতে পারলে আপনার React অ্যাপ 2X দ্রুত হবে!