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

React: управление данными компонентов props — значения, которые родитель передаёт дочернему компоненту; внутри компонента они доступны только для чтения state — это локальное состояние самого компонента, которое может…

Короткий ответ

Что ответить на собеседовании

React: управление данными компонентов props — значения, которые родитель передаёт дочернему компоненту; внутри компонента они доступны только для чтения state — это локальное состояние самого компонента, которое может изменяться внутри него Компонент не изменяет props напрямую, а state обновляется через setState или хуки С помощью props компонент можно переиспользовать и управлять им извне state обеспечивает динамическое обновление UI после действий пользователя или наступления событий props → внешний интерфейс, state → внутренняя логика компонента

Подробный разбор

Ответ с пояснениями

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

  • React: управление данными компонентов
  • props — значения, которые родитель передаёт дочернему компоненту; внутри компонента они доступны только для чтения
  • state — это локальное состояние самого компонента, которое может изменяться внутри него
  • Компонент не изменяет props напрямую, а state обновляется через setState или хуки
  • С помощью props компонент можно переиспользовать и управлять им извне
  • state обеспечивает динамическое обновление UI после действий пользователя или наступления событий
  • props → внешний интерфейс, state → внутренняя логика компонента

Подробный ответ

Основной ответ

Props и state — два базовых механизма работы с данными в React, однако назначение и поведение у них различаются. Props (сокращение от properties) — это значения, поступающие в компонент извне, чаще всего от родительского компонента. Внутри получающего компонента они не изменяются. State представляет собой внутренние данные компонента: они могут обновляться во время его работы и запускать повторный рендеринг.

Ключевые моменты

  • Props передаются от родительского компонента к дочернему и имеют статус read-only. Компонент не должен менять их самостоятельно: props определяют его конфигурацию или передаваемый контент.
  • State создаётся внутри компонента с помощью useState (в функциональных компонентах) либо this.state (в классовых компонентах). Он подходит для динамических данных, например текущего пользовательского ввода, состояния загрузки или положения переключателей.
  • Обновление state приводит к повторному рендерингу компонента. Новые значения props появляются в тот момент, когда родитель передаёт их дочернему компоненту.

Практический контекст

В реальных приложениях props используют для передачи данных и callbacks в дочерние компоненты, а state хранит локальные значения, описывающие интерфейс или внутреннее состояние компонента — например видимость модального окна или содержимое формы. В React 18+ хуки useState и useEffect стали стандартным способом управления state.

Практика в реальном времени

Подготовьтесь к следующему собеседованию

Interview Boost учитывает вакансию, резюме и технологии и помогает сформулировать ответ прямо во время интервью.

Начать подготовку