我听说在 react 组件中声明一个函数来处理点击应该在 useCallback 钩子中完成，以避免每次渲染都重新创建函数，特别是如果函数有点复杂，像这样：

const handleClick = useCallback(()=>
{
  "...do a lot of calculations here that takes time"
},[]);    

<button onClick={handleClick}>
  Click me!
</button>

但是我有一个特殊情况，我希望在单击按钮以设置状态时触发 useCallback 函数，这就是我想要的：

const [state, setState] = useState();

const handleClick = useCallback(()=>
{
  const newState = "...do a lot of calculations here that takes time"
  setState( newState )
},[ when button is clicked ]);

问题是，我如何将“单击按钮时”放在 useCallback 的依赖项上，事实上，任何接受依赖项列表的反应钩子？我可以用一些愚蠢的变量来做到这一点，并将需要时间的昂贵计算与 onClick 函数分开，如下所示，但我认为这不是一个好的方法，因为我会浪费内存：

const [state, setState] = useState();

const [dumb, setDumb] = useState(0);

useEffect(()=>
{
  const newState = "...do a lot of calculations here that takes time"
  setState( newState )
},[ dumb ]);

<button onClick=()=>setDumb(dumb+1)>
  Click me!
</button>