React Hooks with TypeScript

const [user, setUser] = useState<User | null>(null);

# Annotate nullable or union state explicitly.

const inputRef = useRef<HTMLInputElement | null>(null);

# Specify the element type for refs.

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset'; payload: number };

# Type reducer actions cleanly with a union.

function useBoolean(initial = false): readonly [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle] as const;
}

# Return readonly tuples for hooks that act like useState.

type AsyncResult<T> = {
  data: T | null;
  error: Error | null;
  loading: boolean;
};

# Type reusable async hook data generically.