在react19版本，使用 useEffect hook时，控制台中eslint出现了一些警告信息，虽说不影响使用，但还是看起来碍眼，先看一下代码

const Report = () => {
    const [count, setCount] = useState(0);

    const fetchData = () => {
        console.log(`Fetching data for count: ${count}`);
    }

    useEffect(() => {
        fetchData();
    }, [count]);

    return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

WARNING in [eslint]
src/pages/data/report.js
Line 16:8: React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

react其实是支持useEffect这种写法的，上面的警告信息是eslint的，表达的意思是说useEffect中，第一个函数依赖的外部元素，必须要在useEffect第二个参数里体现

当然，你就说fetchData方法里面用了count，useEffect第二个参数也有count，为何还警告，你得按照下面这种显示方式写才不会警告

const Report = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(`Fetching data for count: ${count}`);
    }, [count]);

    return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

属实挺鸡肋的，如果说fetchData其他地方也要有，还有下面几种方式屏蔽此警告

指定模块禁用eslint检查

const Report = () => {
    const [count, setCount] = useState(0);

    const fetchData = () => {
        console.log(`Fetching data for count: ${count}`);
    }

    useEffect(() => {
        fetchData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [count]);

    return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

useCallback 写法

const Report = () => {
    const [count, setCount] = useState(0);
    const fetchData = useCallback(() => {
        console.log(`Fetching data for count: ${count}`);
    }, [count]);

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

其实useEffect与useCallback很类似，都是以第二个参数的变化作为第一个参数的执行条件

但useEffect大多用于本组件内的局部逻辑

而useCallback有返回值，多数用于定义函数，而函数是可以当作参数在各父子组件中传递的，多用于项目优化使用