useControlledState to provide a uncontrolled and controlled api for your components

useControlledState.tsx

import { useState } from 'react';

export const useControlledState = <T extends any>(value: T, onChange?: (value: T) => void) => {
  const [uncontrolledValue, setUncontrolledValue] = useState(value);
  if (typeof onChange === 'function') {
    // Controlled version
    return [value, onChange];
  }
  // Uncontrolled version
  return [uncontrolledValue, setUncontrolledValue];
};

I think we can improve typing on this hook, and avoid using any
Also mark second argument as optional

import { useState } from 'react';

export const useControlledState = <T>(value: T, onChange?: (value: T) => void) => {
  const [uncontrolledValue, setUncontrolledValue] = useState(value);
  if (typeof onChange === 'function') {
    // Controlled version
    return [value, onChange];
  }
  // Uncontrolled version
  return [uncontrolledValue, setUncontrolledValue];
};

tks, I was just lazy about typing properly \o/

there is just one problem with your typing, it should be

<T extends any>

typescript does not handle <> generics on .tsx files

not true. Its not a tsx thing, it's the fact that arrow functions can't have "naked" generics. But you could also argue that it should'nt be a generic at all. Because all .value props from native inputs are strings.