Props变更触发组件意外重渲染，固定值props被useEffect误判为变更问题排查

核心原因 #

React的useEffect对依赖项的变更判定默认采用引用相等比较（Object.is算法），而非深比较，只要依赖项的引用地址/原始值不相等，就会触发回调执行，和内容是否逻辑等价无关。

常见触发场景 #

• 父组件每次渲染生成新的引用类型prop
  即使prop的逻辑内容没有变化，只要父组件每次渲染时重新生成了对象、数组、函数类型的prop，新值和旧值的引用地址就会不同，直接被判定为变更。
  常见的错误写法包括：
  • 直接在props位置传字面量引用类型：propsName={{a: 10}}、list={[1,2,3]}
  • 组件内部定义未缓存的回调函数直接传递：onClick={() => handleClick()}
  • 未用useMemo/useCallback缓存的引用类型变量直接传递
• 子组件被频繁卸载重挂载
  如果父组件给子组件绑定的key属性每次渲染都会变化（比如用Math.random()作为key），子组件会每次都走完整的销毁+重建流程，所有useEffect都会在挂载时执行一次，看起来就像是依赖变更触发的回调。
• 原始值隐式类型转换
  若两次传递的prop看起来数值一致，但实际类型不同（比如第一次传数字10，第二次传字符串'10'），Object.is(10, '10')会返回false，也会被判定为变更。
• 钩子拼写错误
  你提供的代码中UseEffect首字母大写，而React官方钩子要求必须小写开头的useEffect，大写开头会被识别为自定义钩子，如果没有正确实现自定义钩子的逻辑，会导致依赖对比异常。

排查方案 #

可以通过缓存引用、校验挂载状态的方式定位问题：

1. 用useRef存储上一次的prop值，打印明确的对比结果：

const prevProp = useRef(propName);
useEffect(() => {
  console.log('旧值：', prevProp.current, '新值：', propName);
  console.log('是否相等：', Object.is(prevProp.current, propName));
  console.log('旧值类型：', typeof prevProp.current, '新值类型：', typeof propName);
  prevProp.current = propName;
}, [propName])

2. 检查父组件传递引用类型prop的逻辑，把固定不变的引用类型移到组件外部，需要动态生成的引用类型用useMemo（对象/数组）、useCallback（函数）缓存。
3. 确认子组件的key属性是固定不变的唯一值，避免无意义的销毁重建。

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