React useEffect依赖未变更却重复执行？如何控制Loading状态

我是React初学者，遇到了useEffect的异常问题：即便依赖项sortData未发生变更（始终为[]），监听sortData的useEffect仍重复执行，持续打印日志并设置Loading状态。
我的代码逻辑为三个useEffect联动：perioddata变更→resultdata变更→sortdata变更→将Loading设为true。但页面刷新时这些useEffect也会执行，导致Loading在sortData未就绪时就被设为true。
恳请详细解释原因，并告知如何让Loading仅在sortData就绪时才变更状态。

相关代码 #

监听sortData的useEffect #

useEffect(() => {
  if (sortData !== undefined && sortData !== null) {
    console.log("sortdata", sortData);
    setLoading(true);
    console.log("loading", loading);
  }
}, [sortData]);

联动逻辑代码 #

useEffect(() => {
  if (
    perioddata !== undefined &&
    perioddata !== null &&
    initialuser.length !== 0
  ) {
    setResultData(resultDateFunc(perioddata));
  }
}, [perioddata, initialuser]);

useEffect(() => {
  if (resultData !== undefined && resultData !== null) {
    setSortData(criteriaSortFunc(resultData));
  }
}, [resultData]);

useEffect(() => {
  if (sortData !== undefined && sortData !== null) {
    console.log("sortdata", sortData);
    setLoading(true);
    console.log("loading", loading);
  }
}, [sortData]);

1. 空数组的引用变更问题：React对useEffect依赖项的对比是引用比较。如果criteriaSortFunc每次执行都返回新的空数组（比如直接return []），哪怕内容都是空，每次setSortData都会让sortData的引用改变，触发useEffect重复执行。
2. 初始渲染的执行特性：页面刷新时，所有useEffect都会在初始渲染后执行一次。如果sortData初始值是undefined或null，之后被设置为空数组，会触发监听逻辑；若后续criteriaSortFunc持续返回新空数组，就会不断触发useEffect。
3. 状态更新的异步性：setLoading(true)是异步操作，你在它之后立刻打印loading，此时loading还是旧值，这会造成“状态没变化但useEffect触发”的错觉。

1. 固定空数组引用，避免重复触发 #

修改criteriaSortFunc，当结果为空时返回同一个空数组常量，而不是每次新建：

// 定义全局常量空数组
const EMPTY_ARRAY = [];

function criteriaSortFunc(data) {
  // 你的排序逻辑
  const sorted = /* ... */;
  // 空结果时返回常量数组，保持引用一致
  return sorted.length ? sorted : EMPTY_ARRAY;
}

2. 增加就绪判断，只在有效数据时设置Loading #

不要仅判断sortData不为空，而是判断数组有有效数据时才更新Loading：

useEffect(() => {
  // 只有sortData存在且有内容时，才设置Loading为true
  if (sortData && sortData.length > 0) {
    console.log("sortdata", sortData);
    setLoading(true);
  }
}, [sortData]);

3. 优化初始渲染逻辑 #

给sortData设置初始值为常量空数组，同时在联动逻辑中增加更严格的判断：

// 初始化sortData为常量空数组，避免初始状态的undefined/null触发逻辑
const [sortData, setSortData] = useState(EMPTY_ARRAY);

useEffect(() => {
  if (resultData && resultData.length > 0) {
    setSortData(criteriaSortFunc(resultData));
  } else {
    setSortData(EMPTY_ARRAY);
  }
}, [resultData]);

4. 合并逻辑减少联动复杂度 #

把多步逻辑合并到同一个useEffect中，减少状态更新次数和联动触发：

useEffect(() => {
  if (perioddata && initialuser.length > 0) {
    const result = resultDateFunc(perioddata);
    if (result && result.length > 0) {
      const sorted = criteriaSortFunc(result);
      setSortData(sorted);
      setLoading(true); // 直接在这里设置Loading，无需多useEffect联动
    } else {
      setSortData(EMPTY_ARRAY);
      setLoading(false);
    }
  }
}, [perioddata, initialuser]);

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