Вопрос с собеседования · Frontend

Как поделиться состоянием между соседними компонентами — что значит «поднять состояние»?

JuniorReact
Ещё спрашивают так:
  • Как передать данные между компонентами в React?
Коротко

Данные в React текут сверху вниз через props. Если двум соседям нужно одно состояние, его поднимают в ближайшего общего родителя: родитель хранит state, передаёт значение вниз через props и функцию изменения (колбэк) тем, кто должен его менять. Так у данных один источник истины. Если props приходится протаскивать через много уровней — смотрят на композицию через children или Context.

  • Не дублировать одно и то же состояние в двух компонентах — они разойдутся
  • Колбэк называют по событию: onChange, onSelect
  • Поднимать не выше, чем нужно: лишние перерисовки родителя

А ещё Prop drilling на 2–3 уровня — нормально, на 6 — повод менять структуру

Подробно

function Filters() {
  const [query, setQuery] = useState("");
  return (
    <>
      <SearchInput value={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

Что хотят услышать

  • Однонаправленный поток данных.
  • Состояние в общем родителе, вниз — значение и колбэк.
  • Один источник истины.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Дочерний компонент может напрямую изменить state соседнего компонента через ref
  • ✓Перенести состояние в общего родителя и передать вниз значение и колбэк
  • ✗Скопировать состояние в оба компонента и синхронизировать их эффектом при каждом изменении
  • ✗Данные в React передаются только снизу вверх, поэтому родитель читает state детей

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования