hook-004.tsx

import { useState, useCallback } from "react";

function Button({ onClick }) {
  console.log("🎯 دکمه رندر شد");
  return <button onClick={onClick}>افزایش</button>;
}

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

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []); // این تابع فقط یک بار ساخته می‌شود

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}