Function useControllableState

packages/react/src/hooks/useControllableState.ts:36–108

({
  name = 'custom',
  defaultValue,
  value,
  onChange,
}: ControllableStateOptions<T>)

 * uncontrolled, or vice-versa.
 */
export function useControllableState<T>({
  name = 'custom',
  defaultValue,
  value,
  onChange,
}: ControllableStateOptions<T>): [T, React.Dispatch<React.SetStateAction<T>>] {
  const [state, internalSetState] = React.useState(value ?? defaultValue)
  const controlled = React.useRef<boolean | null>(null)
  const stableOnChange = React.useRef(onChange)

  React.useEffect(() => {
    stableOnChange.current = onChange
  })

  if (controlled.current === null) {
    controlled.current = value !== undefined
  }

  const setState = React.useCallback(
    (stateOrUpdater: T | ((prevState: T) => T)) => {
      const value =
        typeof stateOrUpdater === 'function'
          ? // @ts-ignore stateOrUpdater is a function
            stateOrUpdater(state)
          : stateOrUpdater

      if (controlled.current === false) {
        internalSetState(value)
      }

      stableOnChange.current?.(value)
    },
    [state],
  )

  React.useEffect(() => {
    const controlledValue = value !== undefined

    // Uncontrolled -> Controlled
    // If the component prop is uncontrolled, the prop value should be undefined
    if (controlled.current === false && controlledValue) {
      warning(
        true,
        'A component is changing an uncontrolled %s component to be controlled. ' +
          'This is likely caused by the value changing to a defined value ' +
          'from undefined. Decide between using a controlled or uncontrolled ' +
          'value for the lifetime of the component. ' +
          'More info: https://reactjs.org/link/controlled-components',
        name,
      )
    }

    // Controlled -> Uncontrolled
    // If the component prop is controlled, the prop value should be defined
    if (controlled.current === true && !controlledValue) {
      warning(
        true,
        'A component is changing a controlled %s component to be uncontrolled. ' +