如何在按钮点击时触发useCallback/useMemo/useEffect并设置依赖？

首先要明确：useCallback的依赖列表不是用来指定函数执行时机的，而是控制函数何时重新创建。按钮点击是触发函数执行的动作，根本不需要放进依赖列表里。

你之前的思路完全走偏了，正确的写法很简单——直接把耗时计算逻辑放在useCallback包裹的点击处理函数里，依赖列表只放计算过程中用到的状态、props等变量即可：

const [state, setState] = useState();

const handleClick = useCallback(() => {
  // 这里执行大量耗时计算
  const newState = "基于计算得到的新状态值";
  setState(newState);
}, []); // 若计算用到其他变量（比如某个props或state），就把它放进这里

<button onClick={handleClick}>点击我！</button>

补充说明： #

• React中useState返回的setState函数是稳定的，不会随组件渲染变化，所以不需要放进useCallback的依赖列表。
• 如果你的耗时计算依赖于某个状态或props，比如用到count状态，只需把count加入依赖列表，这样当count变化时，handleClick会重新生成，确保计算使用最新的count值：

const [count, setCount] = useState(0);
const [state, setState] = useState();

const handleClick = useCallback(() => {
  const newState = count * 100 + "其他耗时计算结果";
  setState(newState);
}, [count]);

<button onClick={handleClick}>点击我！</button>

为什么你之前的方法不可取？ #

你用额外的dumb状态触发useEffect的做法完全没必要：

• 多维护了一个无关状态，增加了内存开销
• 每次点击会触发两次状态更新（setDumb和setState），导致额外的组件渲染，反而降低性能

内容的提问来源于stack exchange，提问作者Daniel Guedes