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

Чем state отличается от props в React?

JuniorReact
Ещё спрашивают так:
  • Что такое подъём состояния (lifting state up)?
Коротко

props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз; ребёнок сообщает об изменениях родителю через колбэки в props. Общее состояние нескольких компонентов поднимают к ближайшему общему предку.

  • Производное от props или state не хранят в state — вычисляют при рендере
  • setState асинхронен и группируется: новое значение видно в следующем рендере
  • Обновление по предыдущему значению — функцией: setCount(c => c + 1)

А ещё Копировать props в state — источник рассинхронизации

Подробно

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

Подъём состояния. Если поле поиска и список результатов должны знать строку запроса, она хранится в общем родителе и передаётся вниз: значение — одному, обработчик изменения — другому.

Что не класть в state: то, что вычисляется из других данных (отфильтрованный список, полное имя), — иначе нужно синхронизировать две копии. Дорогие вычисления — useMemo.

Группировка обновлений. Несколько вызовов setState в одном обработчике дают один рендер; setCount(count + 1) дважды подряд увеличит на 1, а функциональная форма — на 2.

Пример

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

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

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

  • Различие props и state.
  • Однонаправленный поток и подъём состояния.
  • Особенности обновления state.

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

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

Показать варианты и ответ
  • ✓props — данные от родителя только для чтения, state — свои данные, меняются через setState
  • ✗Ребёнок может напрямую изменить props, и родитель сразу увидит новое значение без всякого колбэка
  • ✗Данные в React текут снизу вверх: state приходит от детей, а props компонент хранит у себя сам
  • ✗state передаётся между соседними компонентами напрямую, без какого-либо участия общего родителя

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

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

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

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

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