> Что такое props и state в React и в чем их разница? (React)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: Иннотех, VK, Домклик

Стек: React

> Пример ответа

Props (сокращение от properties) - это входные данные, которые передаются компоненту извне, от родительского компонента. Props неизменяемы (immutable): компонент не может их изменить, он только читает их и использует для рендеринга. Пример: <User name="Анна" age={25} /> - здесь name и age - это props.

State - это внутреннее состояние компонента, которое управляется им самим. State изменяем (mutable) и может обновляться с помощью setState() (в классовых компонентах) или хука useState() (в функциональных). Изменение state вызывает повторный рендер компонента. Пример: const [count, setCount] = useState(0); - count - это state, который можно увеличить через setCount(count + 1).

Основные различия:

Источник данных: props приходят от родителя, state - внутреннее состояние компонента.
Изменяемость: props только для чтения, state можно изменять только внутри компонента.
Контроль: props контролируются родителем, state - самим компонентом.
Использование: props для конфигурации и передачи данных, state для отслеживания динамических изменений (например, ввод в форму, таймеры, анимации).

Ключевой принцип: данные должны течь сверху вниз (через props), а state используется для локальной интерактивности.