对象类型状态导致useEffect在组件挂载时触发的问题

1. React依赖对比机制：useEffect的依赖数组采用引用浅比较规则，对于对象类型的依赖，只有当引用完全相同时，才会判定为未变化。
2. 状态引用的意外变更：
   • 若你在代码其他位置调用setSelectedDateRange时，传入了与当前状态内容一致但引用不同的新对象，会导致状态引用变更，触发useEffect重复执行。
   • 虽useState的初始值仅在组件首次挂载时生效，但如果组件重渲染时存在误操作更新状态的逻辑，也会引发不必要的useEffect触发。
3. 页面刷新的正常触发：刷新页面时组件重新挂载，useEffect会执行一次，这是React的正常行为；但如果仅组件重渲染（无状态实际变化）时也触发，则是引用变化导致的无意义执行。

方法1：改用原始类型作为依赖项 #

将useEffect的依赖从整个对象改为对象中的原始值（startDay和endDay），原始类型（字符串、数字等）采用值比较，只要内容相同就不会触发useEffect：

useEffect(() => {
  fetchPerformanceData();
}, [selectedDateRange.startDay, selectedDateRange.endDay]);

方法2：函数式初始化状态 #

用函数式方式初始化selectedDateRange，确保初始对象仅在组件首次挂载时创建一次，避免后续渲染中可能的意外引用变更：

const [selectedDateRange, setSelectedDateRange] = useState(() => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');
  const formattedDate = `${year}-${month}-${day}`;
  return { startDay: formattedDate, endDay: formattedDate };
});

方法3：避免无意义的状态更新 #

检查所有调用setSelectedDateRange的逻辑，确保只有当日期范围实际值发生变化时才更新状态，不要传入与当前状态内容完全相同的新对象：

const updateDateRange = (newStart, newEnd) => {
  if (newStart !== selectedDateRange.startDay || newEnd !== selectedDateRange.endDay) {
    setSelectedDateRange({ startDay: newStart, endDay: newEnd });
  }
};

方法4：用useMemo缓存动态计算的日期（可选） #

若日期范围需要根据其他状态动态生成，用useMemo缓存对象，确保只有当依赖值变化时才生成新对象：

const formattedDate = useMemo(() => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}, []); // 空依赖则仅挂载时计算，需随时间更新可添加对应依赖

const [selectedDateRange, setSelectedDateRange] = useState({ startDay: formattedDate, endDay: formattedDate });

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