自定义hooks:useState添加回调

457 阅读1分钟

需求

工作中发现,经常需要在修改state后执行回调,但是hook里并不能像setState那样有第二个参数,于是打算自己新建个hook实现一下这个cb回调

实现

通过ref来存储临时变量cb,然后对cb进行一个监听,代码如下

import React, { useEffect, useState, useRef } from "react";

const useCallbackState = (initState) => {
    const cbRef = useRef();
    const [data, setData] = useState(initState);

    useEffect(() => {
        cbRef.current && cbRef.current(data);
    },[cbRef.current]);

    return [data, function (payload, callback) {
        setData(prev => {
            cbRef.current = callback;
            return typeof(payload) === 'function' ? payload(prev) : payload;
        });
    }];
}
export default useCallbackState