React自定义钩子异步更新引发组件useEffect重复触发问题求解

当前场景下，自定义钩子useCustomHook通过两个独立异步操作分别更新value1和value2，导致组件出现value1=true但value2=false的过渡状态，触发了原本不需要执行的alert。我们的目标是忽略这类异步更新的中间状态，仅在最终稳定状态不符合预期时才触发alert。

方案一：合并异步操作，同步更新状态 #

既然最终value1和value2都会变为true，直接合并两个异步逻辑，让两个状态同时更新，从根源上消除过渡状态：

修改useCustomHook代码：

import { useState, useEffect } from 'react';

function useCustomHook() {
  const [value1, setValue1] = useState(false);
  const [value2, setValue2] = useState(false);

  useEffect(() => {
    // 合并异步操作，确保两个状态同时更新
    setTimeout(() => {
      setValue1(true);
      setValue2(true);
    }, 4000); // 取最长的异步时长，保证所有操作完成后再更新状态
  }, []);

  return { value1, value2 };
}

export default useCustomHook;

方案二：用Ref追踪稳定状态，过滤过渡更新 #

如果无法修改自定义钩子的逻辑，在Home组件中添加ref标记最终稳定状态，仅在状态未稳定且符合alert条件时触发：

修改Home组件代码：

import React, { useEffect, useRef } from 'react';
import useCustomHook from './useCustomHook';

function Home() {
  const { value1, value2 } = useCustomHook();
  const isFinalState = useRef(false);

  useEffect(() => {
    // 当两个值都变为true时，标记为最终稳定状态
    if (value1 && value2) {
      isFinalState.current = true;
    }
    // 仅在非稳定状态下，且满足alert条件时才触发
    if (!isFinalState.current && value1 && !value2) {
      alert('Alert: value1 is truthy and value2 is falsy');
    }
  }, [value1, value2]);

  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Value 1: {value1 ? 'true' : 'false'}</p>
      <p>Value 2: {value2 ? 'true' : 'false'}</p>
    </div>
  );
}

export default Home;

方案三：在自定义钩子中添加加载完成标识 #

在钩子中新增isLoaded状态，标记所有异步操作完成，组件仅在加载完成后才进行条件判断：

首先修改useCustomHook：

import { useState, useEffect } from 'react';

function useCustomHook() {
  const [value1, setValue1] = useState(false);
  const [value2, setValue2] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    let timer1 = setTimeout(() => {
      setValue1(true);
      checkLoadStatus();
    }, 2000);

    let timer2 = setTimeout(() => {
      setValue2(true);
      checkLoadStatus();
    }, 4000);

    // 检查是否所有异步操作都完成
    function checkLoadStatus() {
      if (value1 && value2) {
        setIsLoaded(true);
      }
    }

    // 清理定时器
    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
    };
  }, [value1, value2]);

  return { value1, value2, isLoaded };
}

export default useCustomHook;

然后修改Home组件：

import React, { useEffect } from 'react';
import useCustomHook from './useCustomHook';

function Home() {
  const { value1, value2, isLoaded } = useCustomHook();

  useEffect(() => {
    // 仅在所有异步操作完成后，再判断是否触发alert
    if (isLoaded && value1 && !value2) {
      alert('Alert: value1 is truthy and value2 is falsy');
    }
  }, [value1, value2, isLoaded]);

  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Value 1: {value1 ? 'true' : 'false'}</p>
      <p>Value 2: {value2 ? 'true' : 'false'}</p>
    </div>
  );
}

export default Home;

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