如何规避React useEffect首次执行并解决ESLint依赖警告？

我希望让useEffect不执行首次渲染逻辑，因此自定义了一个检测首次渲染的hook：

useFirstRender #

import { useRef, useEffect } from 'react';

export function useFirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  return firstRender.current;
}

我想按如下方式使用它：

const firstRender = useFirstRender();
const [isOpen, setOpen] = useState<boolean>(false);
 
useEffect(() => {
  if (firstRender) {
    return;
  }

  /* 使用isOpen依赖的其余逻辑 */

}, [isOpen, firstRender]);

方案1：将firstRender加入useEffect依赖数组 #

该依赖会在firstRender变为false时重新触发useEffect，导致逻辑失效。

方案2：不将firstRender加入useEffect依赖数组 #

逻辑可正常运行，但构建时会触发ESLint警告：

Warning: React Hook useEffect has a missing dependency: 'firstRender'. Either include it or remove the dependency array. react-hooks/exhaustive-deps.

我想知道最优解决方案是什么？

• 是否有仅通过逻辑实现的解决方案？
• 我知道可以添加// eslint-disable-line注释禁用警告，但这种做法合理吗？在预期行为下需要这么做感觉很奇怪，能否指定禁用特定字段并保留原有规则？

我是否遗漏了什么？为何ESLint规则会阻止有用的操作？我明确不需要该依赖！

最优解决方案：优化自定义hook逻辑 #

问题出在原useFirstRender的实现上——它直接返回ref.current的即时值，这个值会在首次渲染后变化，导致依赖检测出问题。可以通过以下两种逻辑调整完美解决：

方案A：修改useFirstRender返回ref对象 #

import { useRef, useEffect } from 'react';

export function useFirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  // 返回ref对象而非直接返回current值
  return firstRender;
}

使用方式：

const firstRenderRef = useFirstRender();
const [isOpen, setOpen] = useState<boolean>(false);
 
useEffect(() => {
  if (firstRenderRef.current) {
    return;
  }

  /* 使用isOpen依赖的其余逻辑 */

}, [isOpen]); // 无需加入firstRenderRef，ref对象本身是稳定引用

ref对象在组件生命周期内始终是同一个引用，ESLint不会将其判定为需要加入依赖的变量，同时我们能通过current属性获取最新的首次渲染状态，彻底规避依赖问题。

方案B：直接在目标useEffect内实现首次判断 #

如果不想额外维护自定义hook，也可以直接在需要跳过首次渲染的effect里写判断逻辑：

const [isOpen, setOpen] = useState<boolean>(false);
const firstRender = useRef(true);
 
useEffect(() => {
  if (firstRender.current) {
    firstRender.current = false;
    return;
  }

  /* 使用isOpen依赖的其余逻辑 */

}, [isOpen]);

这种方式更简洁，不需要额外hook，同样能跳过首次渲染，且不会触发ESLint警告。

关于ESLint注释的合理性 #

如果坚持使用原来的useFirstRender实现，添加// eslint-disable-line是合理的，但一定要加注释说明原因：

useEffect(() => {
  if (firstRender) {
    return;
  }

  /* 使用isOpen依赖的其余逻辑 */

}, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps -- firstRender仅首次渲染为true，后续无变化

目前react-hooks/exhaustive-deps规则不支持单独忽略某个依赖，只能整条规则禁用，但添加注释后，团队成员能明确这是有意为之的操作，而非疏忽。

这种做法在明确变量不会引发闭包问题时完全可行——因为firstRender在首次渲染后就固定为false，后续组件重渲染时它的值不会再改变，所以即使不加入依赖数组，也不会出现过时闭包的问题。

为什么ESLint规则会阻止这个操作？ #

react-hooks/exhaustive-deps规则的核心目的是防止闭包捕获过时变量，它会机械检测所有在effect内使用的外部变量是否加入依赖数组。但它无法智能识别像firstRender这种仅在首次渲染时变化、之后永远固定的变量，只能抛出通用警告。

你的场景属于规则的“边缘情况”：你明确知道该变量不会引发问题，但规则无法自动判断，所以会触发警告。这种情况下，添加注释说明后禁用警告是完全可接受的。

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