useControlledState

1import * as React from "react";
2 
3interface CommonControlledStateProps<T> {
4  defaultValue?: T;
5  value?: 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 ? (defaultValue as T) : value
18  );
19 
20  React.useEffect(() => {
21    if (value !== undefined) {
22      setInternalState(value);
23    }
24  }, [value]);
25 
26  const setState = React.useCallback(
27    (next: T, ...args: Rest) => {
28      setInternalState(next);
29      onChange?.(next, ...args);
30    },
31    [onChange]
32  );
33 
34  return [state, setState] as const;
35}