create-react-app:useEffect挂钩依赖项警告

Question

我总是使用npx中的react代码库create react app my app——template typescript。

function App() {
const [text, setText] = useState('');
const dispatch = useDispatch();
const _someFunction = useCallback(async () => {
try {
dispatch(actionB(dataB))
} catch (error) {
// 
}
}, [dispatch]); <- here 2
useEffect(() => {
console.log('text : ', text);
dispatch(actionA(dataA));
_someFunction();
}, [text, dispatch, _someFunction]); <- here 1
return (
<div className="App">
hello
</div>
);
}
export default App;

在"here 1"中，我可以理解"text"必须出现在useEffect的[]中，因为它是触发useEffect变化的因素。

对于"dispatch"，它不是变化因素，所以我认为它不需要放在[]中。"_someFunction"也是如此。

但是，如果我没有放置"dispatch"one_answers"_someFunction"，控制台将警告我如下：-

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

此外，我知道在useEffect中使用// eslint-disable-next-line react-hooks/exhaustive-deps可以抑制警告。

我想知道正确的方法。我的问题是：-

1. 是否有必要在[]中包含所有的"text"、"dispatch"、"_someFunction"，以便我能够遵守基于创建应用程序的控制台警告，或者
2. 我将只包括要检测的因素，即触发useEffect的"文本"。为了抑制成功的CD/CI的警告，我可以应用// eslint-disable-next-line react-hooks/exhaustive-deps来排除其他不需要的依赖项，例如"dispatch"、"_someFunction">

Answer 1

不要抑制警告

如果有警告，那是有原因的！如果所需的东西使你无法实现你所需要的，那你就是在使用错误的模式！

你并不总是需要钩子

为什么你不在避免useEffect之间再加一个函数呢？

const onChange=(value)=>{
setText(value);
dispatch(actionA(dataA));
_someFunction();
}

useEffect用于在必要时更新整个组件。

但我想用钩子

好吧，你能做到！重要的是，不要使用普通函数作为第一个参数，而是使用钩子。你所做的将是：

useEffect(() => {
console.log("text : ", text);
}, [text]);
const dispatchCallback = useCallback(() => {
dispatch(actionA(dataA));
}, [actionA, dataA]);
useEffect(dispatchCallback, [text]);
useEffect(_someFunction, [text]);

看到了吗？每个效应是独立的。每当变量文本发生更改时，都会调用回调。

我不推荐这种模式钩子太多，用处不大！