如何在不关闭ESLint检查时，仅让useEffect随srcFocus变化触发

原代码 #

React.useEffect(() => {
  // navigate from pdf to source
  if (srcFocus && srcFocus.length > 0) {
    let pos: SrcPosition = srcFocus[0];
    let name_paths = pos.file.split("/");
    ProjectTreeFolder.handleExpandFolder(
      name_paths,
      props,
      selectedFile
    );
  }
}, [srcFocus, props]);

需求 #

仅在srcFocus变化时触发该effect，但ESLint提示需添加selectedFile到依赖数组；确定无需在props或selectedFile变化时触发effect，且不想关闭react-hooks/exhaustive-deps检查。

最佳实践方案 #

方案1：用useRef缓存最新值

通过useRef存储selectedFile和props的最新引用，既让effect能访问到最新值，又保证依赖数组仅保留srcFocus，完全符合ESLint规则。

// 初始化ref存储当前值
const selectedFileRef = React.useRef(selectedFile);
const propsRef = React.useRef(props);

// 每次组件渲染后更新ref的最新值
React.useEffect(() => {
  selectedFileRef.current = selectedFile;
  propsRef.current = props;
});

React.useEffect(() => {
  // navigate from pdf to source
  if (srcFocus && srcFocus.length > 0) {
    let pos: SrcPosition = srcFocus[0];
    let name_paths = pos.file.split("/");
    // 访问ref的current属性获取最新值
    ProjectTreeFolder.handleExpandFolder(
      name_paths,
      propsRef.current,
      selectedFileRef.current
    );
  }
}, [srcFocus]); // 仅依赖srcFocus，满足触发条件需求

方案2：提取独立逻辑到纯函数（可选）

如果ProjectTreeFolder.handleExpandFolder的调用逻辑可以独立封装，可将其拆分为不依赖组件闭包的纯函数，结合ref传递最新参数。此方案仅适用于逻辑可拆分的场景，方案1的通用性更强。

方案说明 #

• 两种方案均不关闭ESLint检查，完全符合react-hooks/exhaustive-deps规则
• 通过useRef避免闭包陷阱，确保effect执行时能拿到selectedFile和props的最新值
• 严格控制effect触发条件，仅在srcFocus变化时执行

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