我认为如果你可以在事件处理程序中做一些事情，那么你应该在那里做，而不是useEffect。
以下是一些附加的报价。
文件：
在React中，副作用通常属于事件处理程序。事件处理程序是当您执行某些操作时（例如，当您单击按钮时）React运行的函数。即使事件处理程序是在组件中定义的，它们也不会在呈现过程中运行！因此事件处理程序不需要是纯的。
如果您已经用尽了所有其他选项，并且找不到适合副作用的事件处理程序，您仍然可以在组件中使用useEffect调用将其附加到返回的JSX。这会告诉React稍后在渲染之后，当允许副作用时执行它。但是，这种方法应该是您的最后手段。
丹·阿布拉莫夫（Dan Abramov）也引用了相关的一句话：
总而言之，如果某个 * 用户 * 做了某件事而发生了什么，useEffect可能不是最好的工具。
另一方面，如果一个效果只是将某些东西（小部件上的GoogleMap坐标）同步到当前状态，useEffect是一个很好的工具，而且它可以安全地过度使用。

UseEffect会在元件挂载时执行一次。
您可以让状态触发useEffect。
是否应将useEffect逻辑移到onClick侦听器？
这取决于你，如果你需要render你的应用，所以没有。
onClick函数需要对依赖于页面逻辑的东西做些什么。

对于简单的操作，您不需要useEffect，useEffect还将调用您必须处理的组件挂载。

export default function Foo() {
  const onClick = useCallback((isActive) => {
    // fetch some data
    // set that data to state
  }, []);

  return (
    <>
      <button type="button" className="secondary" onClick={() => onClick(true)}>
        ACTIVATE
      </button>
      <button
        type="button"
        className="secondary"
        onClick={() => onClick(false)}
      >
        DEACTIVATE
      </button>
    </>
  );
}