@e-group/hooks/esm/useControlled.js

eGroup team react-hooks that share across projects.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useRef, useState, useCallback } from 'react';
export default function useControlled({
  controlled,
  default: defaultProp
}) {
  const _useRef = useRef(controlled !== undefined),
        isControlled = _useRef.current;

  const _useState = useState(defaultProp),
        _useState2 = _slicedToArray(_useState, 2),
        valueState = _useState2[0],
        setValue = _useState2[1];

  const value = isControlled ? controlled : valueState;
  const setValueIfUncontrolled = useCallback(newValue => {
    if (!isControlled) {
      setValue(newValue);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);
  return [value, setValueIfUncontrolled];
}