React Hook API，我应该为SetStateAction设置deps吗？

Question

我有一个问题要使用react hook api

const Example: FC = (props) => {
    const [str, setStr] = useState('example');
    const onClickCb = useCallback(() => {
        setStr(str + '_');
    }, [str, setStr]); // should I need watch setStr?
    return <button onClick={onClickCb}>{str}</button>;
};

Answer 1

不，您不需要添加setStr，因为它在组件的生命周期内不会更改。但添加它也没有太大的危害，因为它不会改变。

来自useState react docs：

注意

React保证setState函数标识是稳定的，并且在重新渲染时不会改变。这就是为什么从useEffect或useCallback依赖列表中省略它是安全的。

但你绝对应该删除str。国家不应该根据当前状态更新为react may batch multiple calls to setState。这可能会导致更新在短时间内丢失。而是使用setState的回调版本：

const Example: FC = (props) => {
    const [str, setStr] = useState('example');
    const onClickCb = useCallback(() => setStr(current => `${current}_`)), []);
    return <button onClick={onClickCb}>{str}</button>;
};