ReactIntermediate

memo, useMemo, useCallback

অপ্রয়োজনীয় re-render কমাতে memo, expensive computation-এর জন্য useMemo, stable function-এর জন্য useCallback — বাংলায়।

7টি অংশবাংলা ভাষায়

React.memo

React.memo examplejsx

jsx

import { memo } from "react";

// props না বদলালে re-render হবে না
const ProductCard = memo(function ProductCard({ product }) {
  return (
    <div>
      <strong>{product.name}</strong> — {product.price} টাকা
    </div>
  );
});

export default ProductCard;

useMemo

Expensive computationjsx

jsx

import { useMemo } from "react";

function Report({ transactions, filter }) {
  const filtered = useMemo(
    () => {
      // ব্যয়বহুল গণনা — লুপ/score
      return transactions.filter((t) => t.status === filter);
    },
    [transactions, filter] // এগুলো বদলালেই শুধু আবার হিসাব
  );

  return <ul>{filtered.map((t) => <li key={t.id}>{t.amount}</li>)}</ul>;
}

useCallback

Stable functionjsx

jsx

import { useCallback } from "react";

function App() {
  // deps না বদলানো পর্যন্ত একই function reference
  const handleSave = useCallback(async (id) => {
    await saveItem(id);
  }, []);

  // child-এর memo-এ তখন beneficial
  return <SaveButton onSave={handleSave} />;
}

React Compiler

React 19-এর React Compiler (babel plugin) automatic memo করে — তখন memo/useMemo/useCallback প্রায়ই লাগবে না। তবুও ধারণাগুলো জানা দরকার — fallback ও library-র সাথে মিলিয়ে বুঝতে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।