Управляемый против неуправляемого

Управляемый означает, что состоянием владеет родитель; компонент — чистая функция пропа value. Он рендерит то, что ты передаёшь, и сообщает о намерении через onChange — сам он ничего не запоминает. Это ментальная модель React, применённая к одному полю: UI = f(state), где state живёт в родителе. Ты получаешь полный контроль: вывести значение, провалидировать перед фиксацией, синхронизировать с URL, сбросить по требованию.

function Tabs({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  // no useState here — the active tab is whatever the parent says it is
  return (
    <div role="tablist">
      {["a", "b"].map((id) => (
        <button key={id} aria-selected={value === id} onClick={() => onChange(id)}>
          {id}
        </button>
      ))}
    </div>
  );
}
// caller owns the state and every transition
const [tab, setTab] = useState("a");
<Tabs value={tab} onChange={setTab} />;

Цена: каждый вызывающий обязан подключить useState и onChange, даже те, кому нужно лишь очевидное поведение.

Неуправляемый означает, что состоянием владеет компонент; родитель лишь задаёт его начальное значение через defaultValue. Компонент держит собственный useState, проинициализированный один раз из defaultValue, и больше никогда не читает этот проп. Вызывающий пишет одну строку и уходит. Ровно так ведёт себя нативный <input defaultValue="hi" />: ты задаёшь стартовый текст, остальное помнит DOM.

function Tabs({ defaultValue }: { defaultValue: string }) {
  const [value, setValue] = useState(defaultValue); // seeded once, then owned internally
  return (
    <div role="tablist">
      {["a", "b"].map((id) => (
        <button key={id} aria-selected={value === id} onClick={() => setValue(id)}>
          {id}
        </button>
      ))}
    </div>
  );
}
// caller does nothing but pick a starting tab
<Tabs defaultValue="a" />;

Цена: родитель не может прочитать значение или управлять им — ни синхронизации с URL, ни программного сброса, ни «провалидируй перед применением». Лаконично, но это тупик в тот момент, когда вызывающему нужен контроль.

Переиспользуемый виджет должен поддерживать оба режима из одной реализации — наличие пропа выбирает режим. Соглашение, которое использует сам React: если передан value, ты управляемый (побеждает проп); если его нет, ты неуправляемый (побеждает внутреннее состояние, проинициализированное из defaultValue). Всё решение сворачивается в один хук, useControllableState, общий для каждого переиспользуемого виджета. Он всегда держит ячейку внутреннего состояния как запасной вариант, но читает из пропа всякий раз, когда тот определён.

function useControllableState<T>(opts: {
  value: T | undefined;            // the controlled prop (undefined ⇒ uncontrolled)
  defaultValue: T;                 // seed for uncontrolled mode
  onChange?: (next: T) => void;    // notify the parent on every change
}): [T, (next: T) => void] {
  const isControlled = opts.value !== undefined;
  const [internal, setInternal] = useState(opts.defaultValue);
  const value = isControlled ? (opts.value as T) : internal;

  const setValue = (next: T) => {
    if (!isControlled) setInternal(next); // only own the state when uncontrolled
    opts.onChange?.(next);                // always report, so controlled parents hear it
  };
  return [value, setValue];
}

Обрати внимание на асимметрию: в управляемом режиме setValue не трогает внутреннее состояние — он лишь вызывает onChange и даёт пропу втечь обратно. Это сохраняет единый источник истины вместо двух конкурирующих копий.

У режима отказа два лица: навязывание только-управляемого режима и тихая смена режима по ходу жизни. Навяжи только-управляемый — и обложишь налогом каждый тривиальный вызов: одноразовой полоске вкладок на странице настроек теперь нужен собственный useState, ни за что. Именно это трение заставляет разработчиков бросать в остальном хорошие компоненты. Более тонкий баг — смена режима в течение жизни компонента: value, который начинается как undefined, а потом становится определённым (или наоборот), переключает компонент между владением и невладением своим состоянием, и React выдаёт классическое предупреждение «a component is changing an uncontrolled input to be controlled» — симптом потерянного или продублированного источника истины.

// BUG: value is undefined on first render, then defined → mode flips mid-life
function Field({ user }: { user?: User }) {
  // user?.name is undefined until the fetch resolves
  return <Tabs value={user?.name} onChange={onChange} />; // uncontrolled → controlled ⚠️
}

// FIX: commit to one mode. Coalesce to a stable default so value is never undefined…
<Tabs value={user?.name ?? "a"} onChange={onChange} />;
// …or go fully uncontrolled and let the widget own it:
<Tabs defaultValue={user?.name ?? "a"} />;

Правило, которое навязывает хук: компонент управляемый или неуправляемый на всё время своей жизни, решено на первом рендере, никогда не переключается.