@redocly/theme/src/core/hooks/use-controlled-state.ts

Shared UI components lib

import { useState, useCallback } from 'react';

export function useControlledState<T>(
  initialState: T,
  controlledValue?: T,
): [T, (newValue: T) => void] {
  const [state, setState] = useState<T>(initialState);

  const isControlled = controlledValue !== undefined;

  const value = isControlled ? controlledValue : state;

  const setValue = useCallback(
    (newValue: T) => {
      if (!isControlled) {
        setState(newValue);
      }
    },
    [isControlled],
  );

  return [value, setValue];
}