React/TypeScript为何要求将returnFunction加入useEffect依赖数组？

你遇到的是React Hooks的ESLint规则react-hooks/exhaustive-deps的要求，这个规则的核心目的是规避隐蔽bug，哪怕当前代码能正常运行，也得遵守这个规范，原因如下：

• 函数引用可能悄悄变化：你觉得returnFunction不会变，但如果父组件是以内联函数的方式传递（比如<JCheckbox returnFunction={(checked) => { /* 逻辑 */ }} />），父组件每次渲染时都会生成新的函数引用。如果不把它加入依赖数组，useEffect里调用的始终是旧的函数引用，会导致逻辑不生效或数据不同步——现在没出问题只是巧合。
• 强制显式声明依赖：React无法自动推断你是否希望effect响应函数的变化，依赖数组的作用就是让你明确告诉React：当这些值变化时，重新执行effect。这能避免未来代码迭代时，因函数逻辑或传递方式改变而引入的隐蔽bug。
• “正常运行”不代表正确：当前代码能跑只是因为returnFunction的引用暂时没变化，但不符合React Hooks的设计原则，属于潜在的代码隐患。

解决方法 #

1. 合规做法：加入依赖数组（推荐） #

直接把returnFunction添加到useEffect的依赖数组中，同时可以增加函数存在性判断，避免调用undefined：

export function JCheckbox({ returnFunction }: JCheckboxProps) {
  const [isChecked, setIsChecked] = React.useState(defaultState);

  React.useEffect(() => {
    returnFunction?.(isChecked); // 用可选链处理函数未传入的情况
  }, [isChecked, returnFunction]);
}

如果担心父组件传递的函数频繁变化导致effect重复执行，可以在父组件用useCallback缓存函数引用，确保它只有在依赖变化时才更新：

// 父组件代码
const handleCheckboxChange = React.useCallback((checked: boolean) => {
  // 你的业务逻辑
}, []); // 空数组表示函数永远不会重新创建

<JCheckbox returnFunction={handleCheckboxChange} />

2. 忽略警告（不推荐） #

如果你确定returnFunction永远不会变化，可以用ESLint注释临时忽略警告，但这会留下隐患，不建议长期使用：

React.useEffect(() => {
  returnFunction(isChecked);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isChecked]);

内容的提问来源于stack exchange，提问作者Josh Silveous