自定义HooK（一）——实现带回调的useState

今天在重构项目中的一个组件，这个组件原本是用类组件实现的，重构时改成函数组件结合Hook实现。在重构过程中遇到一个问题，有一段逻辑是在setState的第二个参数回调中执行，但是用Hook后，useState并没有提供这样的回调函数，如果某些场景就是希望这样执行该怎么办呢？

后来，写了一个自定义的Hook，实现了带回调的useState，具体代码如下：

import { useState, useEffect, useRef } from 'react';

const useCbState = (initState) => {
    const [state, setState] = useState(initState);
    const didUpdate = useRef();
    const setCbState = (state, cb) => {
        setState(prev => {
            didUpdate.current = cb;
            return typeof state === 'function' ? state(prev) : state;
        });
    };
    useEffect(() => {
        if (didUpdate.current) {
            didUpdate.current(state);
        }
    });
    return [state, setCbState];
};

export default useCbState;