Как передать все пропсы родительского компонента дочернему без явного перечисления в React

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

Знаете ли вы spread-синтаксис в JSX и, главное, его последствия: порядок перезаписи, лишние атрибуты в DOM, типизацию. Следом спрашивают, как передать дальше всё, кроме нескольких пропсов, и когда такой проброс вредит архитектуре.

Как отвечать

Базовый ответ: <Child {...props} />. Дальше то, что отличает опытного разработчика:

• rest-деструктуризация: const { title, onClose, ...rest } = props, затем <Child {...rest} />. Свои пропсы компонент забирает, остальное уходит дальше. Стандартный приём для обёрток над button или input;
• порядок важен: побеждает то, что написано позже. <Button {...rest} type="button" /> фиксирует type, а <Button type="button" {...rest} /> позволяет переопределить его снаружи. className и onClick обычно объединяют вручную, а не перезаписывают;
• что не пробрасывается: key в пропсы не попадает вообще. А ref в React 19 для функциональных компонентов стал обычным пропсом, поэтому {...props} передаёт его вместе с остальными, и forwardRef для этого больше не нужен;
• DOM-элементы: если разложить на <div> пропсы вроде isActive, React предупредит в консоли, а часть неизвестных атрибутов попадёт в разметку. Пропсы для логики снимают через rest до проброса;
• TypeScript: тип обёртки собирают из ComponentProps<typeof Child> или ComponentPropsWithoutRef<"button"> плюс свои поля, тогда проброс остаётся типизированным.

Про производительность скажите честно: сам spread дешёвый. Проблема в другом: если среди пропсов новые объекты или функции на каждом рендере, memo у дочернего компонента перестаёт работать.

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

Пробрасывают всё подряд через три уровня компонентов. Это prop drilling в неявной форме, и уже непонятно, откуда пришло значение. Лучше композиция через children или контекст.

Ставят spread после своих значений и удивляются, что снаружи перетёрли onClick и сломали логику компонента.

Раскладывают весь объект props на нативный элемент и получают в HTML атрибуты вроде variant="primary" или предупреждения React в консоли.