React Hooks依赖警告差异：普通对象与useState对象对比解析

在使用React Hooks时，我发现两段相似的代码中，一段触发了useEffect的依赖警告，另一段却没有，希望搞清楚背后的原因。

代码示例一（触发警告） #

import React, { useEffect, useState } from "react";

const Page = () => {
  let obj = { name: "sahand", age: true };
  const [count, setCount] = useState(0);

  useEffect(() => {
  }, [obj]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>click</button>
    </div>
  );
};

export default Page;

触发的警告信息：

The 'obj' object makes the dependencies of useEffect Hook (at line 7) change on every render. Move it inside the useEffect callback. Alternatively, wrap the initialization of 'obj' in its own useMemo() Hook.eslintreact-hooks/exhaustive-deps

代码示例二（无警告） #

import React, { useEffect, useState } from "react";

const Page = () => {
  const [stateObj, setStateObj] = useState({ name: "sahand", age: true });
  const [count, setCount] = useState(0);

  useEffect(() => {
  }, [stateObj]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>click</button>
    </div>
  );
};

export default Page;

我的问题 #

1. 为何示例一中用let声明的obj会触发useEffect依赖警告？在useState外部初始化obj有何影响？
2. 为何示例二中使用useState初始化的对象不会触发警告？与示例一相比，React的处理行为有何差异？

我个人的理解是：当在useState中定义引用类型变量（如对象或数组）时，只要不通过useState提供的setState函数显式修改，React会在多次渲染中维持该对象的引用不变，不会将其视为每次渲染的新引用。

问题解析 #

1. 示例一触发警告的原因 #

React组件每次重新渲染（比如点击按钮修改count触发的渲染），组件函数都会完整执行一遍。

示例一中的let obj = { name: "sahand", age: true };是在组件函数内部直接声明的，每次渲染都会创建一个全新的对象引用——虽然对象内容看起来完全一样，但JavaScript里对象是引用类型，每次执行{}都会生成一个新的内存地址。

useEffect的依赖数组是通过引用相等性来判断依赖是否变化的。每次渲染obj的引用都不同，ESLint的react-hooks/exhaustive-deps规则会检测到这个问题并抛出警告，因为这会导致useEffect在每次渲染时都重新执行，违背了依赖数组“仅在依赖变化时执行副作用”的设计目的。

2. 示例二无警告的原因 #

示例二中的stateObj是通过useState初始化的，React会在组件的多次渲染中保留这个对象的引用，除非你调用setStateObj传入新对象来主动更新它。

具体逻辑是：

• 首次渲染时，useState({ name: "sahand", age: true })创建对象并保存其引用；
• 后续每次渲染（比如修改count触发的渲染），useState都会返回同一个引用的对象，不会重新创建新实例。

所以当count变化触发重新渲染时，stateObj的引用没有改变，useEffect的依赖数组未发生变化，ESLint规则也就不会抛出警告。

你的理解完全正确——React会在组件生命周期内维护state中引用类型的引用一致性，除非通过setState主动更新。

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