useControllableState (use-controllable-state)

primitives · ui, controlled-state, react-hook, state-management

Manages state that can be either controlled by a prop or uncontrolled internally, warning on mode switches.

// Source: https://github.com/radix-ui/primitives | License: MIT | Copyright 2022 WorkOS
// Provided via justclaw.it.com; keep this notice with the code.
export function useControllableState<T>({
  prop,
  defaultProp,
  onChange = () => {},
  caller,
}: UseControllableStateParams<T>): [T, SetStateFn<T>] {
  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
    defaultProp,
    onChange,
  });
  const isControlled = prop !== undefined;
  const value = isControlled ? prop : uncontrolledProp;

  // OK to disable conditionally calling hooks here because they will always run
  // consistently in the same environment. Bundlers should be able to remove the
  // code block entirely in production.
  /* eslint-disable react-hooks/rules-of-hooks */
  if (IS_DEVELOPM

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key