packages/hooks/useControlled.ts

   1 import { useCallback, useState } from 'react';
   2
   3 export default function useControlled<V>(controlled: V, defaultValue?: V) {
   4     const isControlled = controlled !== undefined;
   5
   6     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   7
   8     const setValueIfUncontrolled = useCallback((v: V) => {
   9         if (!isControlled) {
  10             setUncontrolledValue(v);
  11         }
  12     }, []);
  13
  14     const value = isControlled ? controlled : uncontrolledValue;
  15
  16     /*
  17      * type-cast here to ensure that this hook's return type is a tuple
  18      * instead of an array as typescript seems to interpret it by default
  19      */
  20     return [value, setValueIfUncontrolled] as const;
  21 }