hook-003.tsx

import { useState, useMemo } from "react";

function ExpensiveCalculation({ count }) {
  const result = useMemo(() => {
    console.log("🔄 محاسبه مقدار جدید...");
    return count * 2;
  }, [count]); // فقط وقتی count تغییر کند، محاسبه اجرا می‌شود

  return <p>Result: {result}</p>;
}

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
      <ExpensiveCalculation count={count} />
    </div>
  );
}