如何解决useEffect无限循环与循环依赖（非空数组依赖场景）

你的代码出现无限循环的核心原因是两个useEffect形成了闭环：第一个effect依赖isBoolean，执行时修改isBool触发第二个effect；第二个effect依赖isBool，执行时修改isBoolean又触发第一个effect，往复循环。以下是几种可行的解决方式：

方案1：仅在状态不符合预期时更新 #

避免无意义的状态更新，只有当状态未达到目标值时才调用setter，打破循环：

const [isBoolean, setIsBoolean] = useState(false); 
const [isBool, setIsBool] = useState(true);

useEffect(() => {
    if (!isBoolean) {
        setIsBoolean(true);
        if (!isBool) {
            setIsBool(true);
        }
    }
}, [isBoolean])

useEffect(() => {
    if (!isBool) {
        setIsBool(true);
        if (!isBoolean) {
            setIsBoolean(true);
        }
    }
}, [isBool])

方案2：合并相关逻辑到单个useEffect #

既然两个effect的操作完全一致（将两个状态设为true），可以合并成一个effect，同时添加状态检查避免重复执行：

const [isBoolean, setIsBoolean] = useState(false); 
const [isBool, setIsBool] = useState(true);

useEffect(() => {
    // 只有当任一状态不是true时才执行更新
    if (!isBoolean || !isBool) {
        setIsBoolean(true);
        setIsBool(true);
    }
}, [isBoolean, isBool])

这样执行一次后两个状态都变为true，后续不会再触发effect。如果有特定的触发条件（比如某个props变化），可以把对应依赖放到数组里。

方案3：用useRef跟踪更新状态 #

如果需要更精细的执行控制，可通过useRef标记是否已完成更新，避免重复触发：

const [isBoolean, setIsBoolean] = useState(false); 
const [isBool, setIsBool] = useState(true);
const hasUpdated = useRef(false);

useEffect(() => {
    if (!hasUpdated.current) {
        setIsBoolean(true);
        setIsBool(true);
        hasUpdated.current = true;
    }
}, [isBoolean, isBool])

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