React Hooks

/**
 * Hook for managing controlled/uncontrolled component state
 * @param props - Configuration object for controlled state
 * @returns Tuple of [value, setValue] for state management
 */
function unstable_useControlled<T = unknown>(
  props: UseControlledProps<T>
): [T, React.Dispatch<React.SetStateAction<T | undefined>>];

interface UseControlledProps<T = unknown> {
  /** Holds the component value when it's controlled */
  controlled: T | undefined;
  /** The default value when uncontrolled */
  default: T | undefined;
  /** The component name displayed in warnings */
  name: string;
  /** The name of the state variable displayed in warnings */
  state?: string;
}

import { unstable_useControlled as useControlled } from '@mui/utils';

function CustomInput({ value, defaultValue, onChange }) {
  const [inputValue, setInputValue] = useControlled({
    controlled: value,
    default: defaultValue,
    name: 'CustomInput',
    state: 'value'
  });

  const handleChange = React.useCallback((event) => {
    setInputValue(event.target.value);
    onChange?.(event);
  }, [onChange, setInputValue]);

  return <input value={inputValue} onChange={handleChange} />;
}

/**
 * Creates a stable callback that doesn't change between renders
 * @param fn - Function to wrap in stable callback
 * @returns Stable callback function
 */
function unstable_useEventCallback<Args, Return>(
  fn: (...args: Args[]) => Return
): (...args: Args[]) => Return;

import { unstable_useEventCallback as useEventCallback } from '@mui/utils';

function MyComponent({ onSubmit, data }) {
  const handleSubmit = useEventCallback((event) => {
    event.preventDefault();
    onSubmit(data); // Always uses latest data value
  });

  return <form onSubmit={handleSubmit}>...</form>;
}

/**
 * Merges refs into a single memoized callback ref or null
 * @param refs - Array of refs to merge
 * @returns Combined ref callback or null
 */
function unstable_useForkRef<Instance>(
  ...refs: Array<React.Ref<Instance> | undefined>
): React.RefCallback<Instance> | null;

import { unstable_useForkRef as useForkRef } from '@mui/utils';

const MyComponent = React.forwardRef<HTMLDivElement, MyProps>((props, ref) => {
  const internalRef = React.useRef<HTMLDivElement>(null);
  const anotherRef = React.useRef<HTMLDivElement>(null);
  const combinedRef = useForkRef(ref, internalRef, anotherRef);

  return <div ref={combinedRef}>Content</div>;
});

/**
 * Provides lazy initialization of refs
 * @param init - Initialization function called once
 * @returns Mutable ref object with initialized value
 */
function unstable_useLazyRef<T>(init: () => T): React.MutableRefObject<T>;

/**
 * Uses useLayoutEffect on client, useEffect on server
 * @param effect - Effect function to execute
 * @param deps - Optional dependency list
 */
function unstable_useEnhancedEffect(
  effect: React.EffectCallback, 
  deps?: React.DependencyList
): void;

/**
 * Runs effect only on component mount
 * @param fn - Function to execute on mount
 */
function unstable_useOnMount(fn: () => void): void;

/**
 * Hook for focus-visible behavior management
 * @returns Object with focus-visible utilities
 */
function unstable_useIsFocusVisible(): {
  isFocusVisibleRef: React.MutableRefObject<boolean>;
  onFocus: (event: React.FocusEvent) => void;
  onBlur: () => void;
  ref: React.RefCallback<Element>;
};

/**
 * Generates stable unique IDs for accessibility
 * @param idOverride - Optional ID override
 * @returns Stable unique ID string
 */
function unstable_useId(idOverride?: string): string;

/**
 * Returns previous value from previous render
 * @param value - Current value to track
 * @returns Previous value or undefined on first render
 */
function usePreviousProps<T>(value: T): T | undefined;

/**
 * Hook for managing timeouts
 * @returns Object with timeout control methods
 */
function unstable_useTimeout(): {
  start: (delay: number, callback: () => void) => void;
  clear: () => void;
};

type Timeout = ReturnType<typeof unstable_useTimeout>;

/**
 * Hook for managing slot component props
 * @param parameters - Slot props configuration
 * @returns Resolved slot props
 */
function unstable_useSlotProps<TSlotComponent, TSlotState, TSlotOwnerState>(
  parameters: UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState>
): UseSlotPropsResult<TSlotComponent>;

interface UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState> {
  elementType: TSlotComponent;
  externalSlotProps: any;
  ownerState: TSlotOwnerState;
  skipResolvingSlotProps?: boolean;
  additionalProps?: any;
  internalSlotProps?: any;
}

interface UseSlotPropsResult<TSlotComponent> {
  props: React.ComponentPropsWithRef<TSlotComponent>;
  internalRef: React.Ref<any>;
}