javascript - React Hook API，我是否需要为 SetStateAction 设置依赖？

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 :

Note

React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

但是你绝对应该删除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>;
};