Как передавать что-либо между компонентами на одном уровне?

Компоненты одного уровня (соседи) не связаны напрямую — данные передаются через общего родителя или через внешние источники.

Подъём состояния (основной способ)

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

const Page = () => {
  const [selectedId, setSelectedId] = useState(null);
  return (
    <>
      <List onSelect={setSelectedId} />   {/* пишет */}
      <Details id={selectedId} />         {/* читает */}
    </>
  );
};

Выбирать по умолчанию: явно, дёшево, отлаживается по дереву.

Context

Если общий родитель далеко и данные «окружающие» (тема, пользователь), их кладут в Provider, соседи читают useContext. Помнить: изменение value рендерит всех потребителей.

Внешний стор

Zustand/Redux/MobX: соседи подписываются селекторами на нужные куски. Выбирать при частых обновлениях и многих потребителях.

Серверный кеш

Если «что-либо» — данные с сервера, оба соседа делают useQuery с одним queryKey: один запрос, общий кеш, синхронное обновление.

URL

Выбранный элемент, фильтры, страница отлично живут в query-параметрах: соседи читают useSearchParams. Бонус — состояние переживает перезагрузку и шарится ссылкой.

Чего не делать

Дёргать ref соседа, обмениваться через глобальный EventEmitter, вызывать чужой setState — обход однонаправленного потока, отладка становится невозможной.

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

Через общего родителя (подъём состояния: колбэк вверх, props вниз) — базовый способ. Далее по ситуации: Context для редких сквозных данных, стор с селекторами для частых, React Query для серверных, URL для навигационного состояния. Прямые связи между соседями — антипаттерн.