自定义反应钩子不能在 useEffect 中调用，依赖项为空

Question

我是反应钩子的新手，我正在做一个具有反应的新功能"钩子"的项目。

我遇到了一个问题，我需要解释一下。

作为文档，要实现"componentDidMount"，只需在依赖项参数中传递空数组。

useEffect(() => {
// some code here
}, []);

我可以调用调度函数来更新这个使用效果中的状态。

const [flag, setFlag] = useState(false);
useEffect(() => {
setFlag(true);
}, []);

上面的代码完美运行，没有警告或任何错误。

现在我有了我的自定义钩子，但我无法在效果中调用我的调度。

const [customFlag, setCustomFlag] = useCustomHook();
useEffect(() => {
setCustomFlag(true);
}, []);

这是我的自定义钩子。

function useCustomHook() {
const [success, setSuccess] = useState(false):
const component = <div>{ success ? "Success" : "Fail" }</div>;
const dispatch = useCallback(success => {
setSuccess(success);
}, []);
return [component, dispatch]; 
}

使用上面的代码，它要求我将 setCustomFlag 放在依赖项数组中。

我不明白为什么。它们之间有什么不同？

感谢分享。

Answer 1

您的自定义钩子可能会在每次调用时返回不同的setCustomFlag实例。这意味着，useEffect()将始终使用第一个值(在第一次渲染时返回(。尝试通过调用useCallback()/useMemo()钩子来记住它：

function useCustomHook() {
...
const setCustomFlag = useCallback(/* setCustomFlag body here */, []);
}

最好有您的自定义钩子源说更多。

Answer 2

原因是 setFlag from useState 是一个已知的依赖项，它的值在渲染之间不会改变，因此您不必将其声明为依赖项

React eslint-plugin-react-hooks 无法确定您的自定义钩子，这就是为什么您需要将其放入依赖项列表中的原因

这取自 eslint-plugin-react-hooks

// Next we'll define a few helpers that helps us
// tell if some values don't have to be declared as deps.
// Some are known to be static based on Hook calls.
// const [state, setState] = useState() / React.useState()
//               ^^^ true for this reference
// const [state, dispatch] = useReducer() / React.useReducer()
//               ^^^ true for this reference
// const ref = useRef()
//       ^^^ true for this reference
// False for everything else.
function isStaticKnownHookValue(resolved) {
}