Что такое пропсы в React компонентах

Что проверяют

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

Как отвечать

Пропсы это объект, который родитель передаёт дочернему компоненту при рендере: данные, колбэки, готовые узлы разметки. Внутри компонента они доступны только для чтения. Чтобы значение изменилось, его меняет владелец состояния, и React перерисовывает поддерево с новыми пропсами.

Что стоит сказать сверх определения:

children это такой же проп, просто записанный содержимым тега. Через него собирается композиция, и она часто снимает необходимость протаскивать данные через три уровня.

Значения по умолчанию задаются параметрами функции, а контракт компонента описывается типами в TypeScript.

key пропом не является и внутри компонента недоступен: это подсказка React для сопоставления элементов списка между рендерами. В современных версиях React ref у функционального компонента приходит обычным пропом, отдельная обёртка для его проброса больше не нужна.

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

Где спотыкаются

Копируют проп в состояние при монтировании и получают экран, который не обновляется. Если значение выводится из пропа, его считают при рендере, а состояние заводят только для того, чем компонент владеет сам.

Меняют объект или массив, пришедший в пропсах. Родитель об изменении не узнает, сравнение по ссылке ничего не заметит, и часть дерева останется со старой картинкой.

Передают новый объект или стрелку на каждом рендере и удивляются, что мемоизация не работает. Ссылка каждый раз новая, поэтому дочерний компонент считает пропсы изменившимися.