Expert Patterns — Series 3

Preview — 3 of 10 questions

What defines a headless (or unstyled) component library like Downshift, Headless UI, or Ark UI?

javascript

// Headless: logic only, zero markup opinions
const { getMenuProps, getItemProps, isOpen, highlightedIndex } = useCombobox({ items });

AIt provides behavior, state management, accessibility, and keyboard interaction — but renders no DOM of its own (or only unstyled elements). The consumer supplies all the markup and styling, wiring it up via hooks/prop-getters or render props. This separates the hard, reusable parts (ARIA roles, focus management, list navigation) from the infinitely-varying presentation

BIt ships components with no props

CIt only works with Tailwind

DIt renders everything in a shadow DOM

Without asChild, Tooltip.Trigger would render its own <button>. What does asChild (implemented with a Slot component) do?

javascript

<Tooltip.Trigger asChild>
  <button className="my-btn">Hover me</button>
</Tooltip.Trigger>

AIt hides the trigger

BInstead of rendering its own element, Tooltip.Trigger **merges its props (event handlers, aria-*, ref) onto the single child element you provide** and renders that. So you get one <button className="my-btn"> with the tooltip behavior attached, rather than a <button> wrapping a <button>. Slot clones the child and composes props/handlers/refs

CIt renders the child in a portal

DIt makes the child a Server Component

What subtle rule must this hook enforce, and what does it get right?

javascript

function useControllableState({ value, defaultValue, onChange }) {
  const [uncontrolled, setUncontrolled] = useState(defaultValue);
  const isControlled = value !== undefined;
  const state = isControlled ? value : uncontrolled;
  const setState = (next) => {
    if (!isControlled) setUncontrolled(next);
    onChange?.(next);
  };
  return [state, setState];
}

AIt must always be controlled

BIt should ignore onChange in controlled mode

CIt correctly (1) picks the source of truth by whether value is undefined, (2) only updates internal state in uncontrolled mode, and (3) always calls onChange. The rule it must enforce: an instance must not switch between controlled and uncontrolled across its lifetime — warn (in dev) if value goes from defined to undefined or back, since that silently changes who owns the state

DIt should throw if defaultValue and value are both passed

Answer all 10 questions (7 more), see explanations for every answer, and track your score.