ahooks/es/useControllableValue/index.js

react hooks library

import { useMemo, useRef } from 'react';
import { isFunction } from '../utils';
import useMemoizedFn from '../useMemoizedFn';
import useUpdate from '../useUpdate';
function useControllableValue(defaultProps, options = {}) {
    const props = defaultProps !== null && defaultProps !== void 0 ? defaultProps : {};
    const { defaultValue, defaultValuePropName = 'defaultValue', valuePropName = 'value', trigger = 'onChange', } = options;
    const value = props[valuePropName];
    const isControlled = Object.prototype.hasOwnProperty.call(props, valuePropName);
    const initialValue = useMemo(() => {
        if (isControlled) {
            return value;
        }
        if (Object.prototype.hasOwnProperty.call(props, defaultValuePropName)) {
            return props[defaultValuePropName];
        }
        return defaultValue;
    }, []);
    const stateRef = useRef(initialValue);
    if (isControlled) {
        stateRef.current = value;
    }
    const update = useUpdate();
    function setState(v, ...args) {
        const r = isFunction(v) ? v(stateRef.current) : v;
        if (!isControlled) {
            stateRef.current = r;
            update();
        }
        if (props[trigger]) {
            props[trigger](r, ...args);
        }
    }
    return [stateRef.current, useMemoizedFn(setState)];
}
export default useControllableValue;