hook-001.tsx

import { useState, useEffect } from "react";

function Component() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("Count updated:", count);
  }, [count, text]); // مشکل: این اثر هر بار که count یا text تغییر کند اجرا می‌شود

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}