React useEffect仅监听state1却使用state2的eslint依赖警告解决方法咨询

针对你遇到的eslint校验警告，有以下几种合规的处理方案：

方案1：使用useRef存储state2的最新值（最推荐） #

利用useRef返回的可变引用不需要加入useEffect依赖数组的特性，实时同步state2的值到ref中，就能在useEffect里拿到最新的state2值同时不会触发额外的执行：

function A() {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);
    // 定义ref同步state2的值
    const state2Ref = useRef(state2);

    // 当state2变更时更新ref的值
    useEffect(() => {
        state2Ref.current = state2;
    }, [state2])

    useEffect(() => {
        const a = state1 + state2Ref.current;
        // do some async logic using a
    }, [state1]); // 此时无需添加state2作为依赖，无eslint警告

    return <div> some text </div>
}

该方案完全符合React Hooks的设计规则，不会出现闭包陷阱，也能保证拿到的state2永远是最新值。

方案2：临时禁用单条eslint校验规则（谨慎使用） #

如果你100%确定当前的闭包逻辑不会出问题，不需要state2更新时触发useEffect，可以直接加注释禁用该行的eslint校验：

useEffect(() => {
    const a = state1 + state2;
    // do some async logic using a
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [state1]);

注意：该方案有闭包陷阱风险，如果回调中用到的state2后续更新，当前useEffect闭包内拿到的还是旧值，仅在你明确不需要最新state2的时候使用。

方案3：使用实验性API useEvent（仅适用React 18+实验版本） #

React官方后续推出的useEvent API就是专门解决这类问题的，它可以包装回调函数，保证回调内永远拿到最新的状态值同时不需要加入依赖数组：

function A() {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);

    const getA = useEvent(() => {
        return state1 + state2;
    })

    useEffect(() => {
        const a = getA();
        // do some async logic using a
    }, [state1]); // 无需添加getA或state2作为依赖

    return <div> some text </div>
}

注意：useEvent目前还处于实验阶段，未进入React稳定版本，生产环境谨慎使用。

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