Как родительские и дочерние компоненты обмениваются данными?

В React поток данных однонаправленный — сверху вниз, поэтому у каждого направления обмена свой механизм.

Родитель → ребёнок: props

const Parent = () => {
  const [user, setUser] = useState(me);
  return <Profile user={user} />;
};

Ребёнок получает данные как props (read-only). Изменились props — ребёнок перерендерился.

Ребёнок → родитель: колбэки

Родитель передаёт функцию, ребёнок вызывает её со своими данными:

const Parent = () => {
  const [query, setQuery] = useState('');
  return <SearchInput onChange={setQuery} />;
};

const SearchInput = ({ onChange }) => (
  <input onChange={(e) => onChange(e.target.value)} />
);

Это «подъём состояния» (lifting state up): данные живут у родителя, ребёнок лишь сообщает о событиях.

Между соседями (siblings)

Напрямую — никак. Состояние поднимается к ближайшему общему родителю: один сосед пишет через колбэк, второй читает через props.

Через много уровней

• Context — провайдер наверху, useContext у потомков; для темы, пользователя, локали.
• Стейт-менеджер (Redux, Zustand) — общий стор с точечными подписками; для сложного глобального состояния.
• Композиция (children/слоты) — часто убирает саму проблему: собрать дерево наверху и передать готовые куски.

Императивный канал: ref

Родитель может дёргать методы ребёнка через ref + useImperativeHandle (фокус, скролл, reset формы) — используется точечно, когда декларативно выразить неудобно.

Коротко для собеседования

Вниз — props, вверх — колбэки (подъём состояния к общему родителю), между соседями — через общего родителя, сквозь уровни — Context или стейт-менеджер, императивные случаи — ref/useImperativeHandle. Однонаправленный поток делает источник любых данных предсказуемым.