Как передаются данные в компоненты React?

Данные попадают в компонент несколькими путями; основной и самый явный — props, остальные дополняют его для особых случаев.

Props — основной канал

<ProductCard
  product={product}          // объект
  discount={0.1}             // число
  onBuy={handleBuy}          // функция (для связи вверх)
  featured                   // булев шорткат (featured={true})
/>

Props передаются как атрибуты JSX и приходят объектом-аргументом. Read-only: компонент не может менять свои props — поток данных однонаправленный, сверху вниз.

children — вложенное содержимое

<Modal title="Оплата">
  <PaymentForm />  {/* попадёт в props.children */}
</Modal>

Специальный проп для композиции: родитель собирает содержимое, обёртка его размещает. Расширение — «слоты» через обычные props: <Layout sidebar={<Menu />} content={<Feed />} />.

Context — сквозь уровни

const user = useContext(AuthContext);

Для данных «окружения» (тема, пользователь, локаль), нужных на многих уровнях без протаскивания props.

Внешние источники через хуки

• Сторы: useSelector(selectCart) (Redux), useCart((s) => s.items) (Zustand).
• Серверный кеш: useQuery(['user', id], fetchUser) (TanStack Query).
• Роутер: useParams(), useSearchParams().

Формально это тоже «данные в компонент», но через подписки, а не через дерево.

Технические детали props

• Деструктуризация в теле — стандарт читаемости.
• Значения по умолчанию: ({ size = 'md' }).
• {...rest} — проброс остальных props DOM-элементу.
• key — не prop: компоненту не виден; ref до React 19 тоже не попадал в props, а в React 19 приходит в функциональный компонент обычным пропом.

Коротко для собеседования

Основной путь — props (read-only, сверху вниз), включая children и «слоты» для композиции. Сквозь уровни — Context. Извне дерева — хуки подписок: стор, React Query, роутер. Изменять полученные props компонент не может — данные меняются там, где ими владеют.