PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Как коспоненты узнают об изменениях параметров в соседних компонентах?

Компоненты

Соседние компоненты (siblings) не видят друг друга — в React нет горизонтальных связей. Обмен всегда идёт через общего владельца данных.

Классический путь: подъём состояния

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

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

Изменение state родителя перерисовывает обоих — сосед «узнаёт» через новые props.

Через контекст

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

Через внешний стор

Zustand/Redux/MobX: соседи подписываются селекторами на нужные куски состояния — рендерится только тот, чьи данные изменились. Правильный выбор для часто меняющегося общего состояния.

Через серверный кеш

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

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

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

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

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

Другие вопросы раздела