React组件useEffect触发无限循环的设计缺陷及修复咨询

引发无限alert的核心缺陷是第一个useEffect未声明依赖数组：

• React的useEffect规则：如果省略第二个依赖数组参数，effect会在组件每一次渲染完成后全量执行，而非仅在挂载/特定依赖变化时执行。
• 该effect内部调用了setUserTestData触发状态更新，状态更新会直接导致组件重渲染；重渲染完成后又会再次执行这个无依赖的effect，再次触发状态更新，形成「渲染→执行effect→更新状态→重渲染」的死循环，最终导致doSomething()里的alert被无限触发。
• 额外设计缺陷：userCount属于可从userTestData直接派生的冗余状态，配套的同步useEffect属于无效逻辑，既增加性能开销，也提高了状态不一致的风险。

• 给初始化逻辑对应的useEffect添加空依赖数组[]，明确声明该effect仅在组件首次挂载完成后执行一次，从根源切断循环触发链路。
• 删除冗余的userCount状态变量和对应的同步useEffect，渲染时直接读取userTestData.length作为用户计数，消除不必要的状态同步逻辑。
• （可选优化）如果doSomething不依赖组件内部的状态、dispatch等上下文，可以将其移到组件外部定义，避免每次组件渲染时重新创建函数实例。

import {Repository} from '../data/Repository';
import { useEffect , useState} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from '../features/counter/counterSlice';
import { setIsValid } from '../features/userManagement/userManagementSlice';

// 无组件依赖的工具函数可以提到组件外部
const doSomething = () => {
  alert('about to do something');
}

export const UserManagement = () => {
    const [userTestData, setUserTestData] = useState([]);
    const count = useSelector((state) => state.counter.value)
    const isValid2 = useSelector((state) => state.userManagement.isValid2)
    const dispatch = useDispatch()

    // 加空依赖数组，仅挂载时执行一次
    useEffect(() => {
        doSomething();
        setUserTestData(Repository.getUserTestData());
    }, [])

    // 直接派生用户数，不需要单独存state
    const userCount = userTestData.length;

    return(
        <>
            <div>
                {
                    userTestData.map((x) => {
                        return <div key={x.Id}>{x.FirstName}</div>
                    })
                }
            </div>
            <div>there are {userCount} users</div>

            <div>
            {/* PARENT INPUT VALIDATION */}
            <div style={{height:100}}>
                <button onClick={() => dispatch(setIsValid())}>
                    TOGGLE VALIDATION
                </button>
                {isValid2 ? 'true' : 'false'}
            </div>

            {/* COUNTER */}
            <div>
                <button
                aria-label="Increment value"
                onClick={() => dispatch(increment())}
                >
                Increment
                </button>
                <span>{count}</span>
                <button
                aria-label="Decrement value"
                onClick={() => dispatch(decrement())}
                >
                Decrement
                </button>
            </div>
            </div>
        </>
    )
}

修复后组件仅会在首次加载时弹出一次alert，后续点击按钮触发Redux状态更新、组件重渲染时都不会重复执行初始化逻辑，也不会出现循环渲染问题。

内容的提问来源于stack exchange，提问作者code-is-awesome