将箭头函数传递给使用钩子的组件会导致useEffect再次激发

Question

如何将箭头函数作为道具传递给使用钩子的组件，而不会在不应该触发useEffect的情况下触发它

Codesandbox

function Apple(props) {
const { text, cb } = props;
useEffect(() => {
pretendFetch().then(result => cb(result));
// eslint-plugin-react-hooks dictates that `cb` should be within the dependencies array
}, [cb]);
return <div>{text}</div>;
}

将箭头函数作为cb传递给组件时，它将在每次渲染时激发useEffect。理想情况下，它应该只使用一次回调，但如果eslint-plugin-react挂钩没有发出警告，我就不能只将[]作为依赖数组传递。我读过useRef可以用来包装回调，但这似乎是一个不令人满意的问题。

Answer 1

这里的问题是在每次渲染时都会重新创建回调函数，因此会触发useEffect中的更新。您可以通过使用useCallback钩子将回调函数包装在覆盖组件中来改变这种行为，就像我在这个CodeSandbox中所做的那样

Answer 2

我今天检查了这个问题，也遇到了同样的问题，所以我只是从useEffect数组中删除了cb，以便只在装载时触发它，并禁用了esint规则react-hooks/exhaustive-deps。