Use Controlled State

1import * as React from "react";
2 
3interface CommonControlledStateProps<T> {
4  value?: T;
5  defaultValue?: T;
6}
7 
8// eslint-disable-next-line @typescript-eslint/no-explicit-any
9export function useControlledState<T, Rest extends any[] = []>(
10  props: CommonControlledStateProps<T> & {
11    onChange?: (value: T, ...args: Rest) => void;
12  },
13): readonly [T, (next: T, ...args: Rest) => void] {
14  const { value, defaultValue, onChange } = props;
15 
16  const [state, setInternalState] = React.useState<T>(
17    value !== undefined ? value : (defaultValue as T),
18  );
19 
20  React.useEffect(() => {
21    if (value !== undefined) setInternalState(value);
22  }, [value]);
23 
24  const setState = React.useCallback(
25    (next: T, ...args: Rest) => {
26      setInternalState(next);
27      onChange?.(next, ...args);
28    },
29    [onChange],
30  );
31 
32  return [state, setState] as const;
33}