React: Что такое Props Drilling и как использование Context API или Redux помогает избежать этой проблемы?

Props Drilling (или «пробрасывание пропсов») — это ситуация в React, когда данные передаются через несколько уровней компонентов, даже если промежуточные компоненты сами эти данные не используют. Они просто «прокидывают» пропсы дальше вниз по дереву компонентов.

**Пример проблемы:**
Представьте дерево: App → Layout → Sidebar → UserMenu → UserAvatar. Если UserAvatar нужно имя пользователя, вы вынуждены передавать проп `userName` через все промежуточные компоненты — Layout, Sidebar, UserMenu — хотя ни один из них этот проп не использует. Это делает код громоздким, трудно читаемым и сложным в поддержке. При изменении структуры данных приходится редактировать каждый промежуточный компонент.

**Как Context API решает проблему:**
Context API — встроенный механизм React, позволяющий создать «глобальное хранилище» данных, доступное любому компоненту в дереве без явной передачи пропсов. Вы создаёте контекст через `React.createContext()`, оборачиваете дерево провайдером « и получаете данные в любом дочернем компоненте через хук `useContext(MyContext)`. Это идеально подходит для данных, которые нужны многим компонентам: тема оформления, язык интерфейса, данные авторизованного пользователя.

**Когда Context API недостаточно:**
Context API прост и удобен, но при частых обновлениях данных может приводить к лишним перерендерам всех подписанных компонентов. Для сложных приложений с большим количеством взаимосвязанных состояний лучше подходит Redux.

**Как Redux решает проблему:**
Redux — внешняя библиотека для управления состоянием. Она создаёт централизованное хранилище (store), доступное всему приложению. Компоненты подписываются на нужные части состояния через хуки `useSelector` и изменяют его через `useDispatch`, отправляя действия (actions). Redux обеспечивает предсказуемость, удобную отладку через DevTools и оптимизированные перерендеры — компонент обновляется только при изменении той части store, на которую он подписан.

**Когда что выбирать:**
— **Context API** — для небольших и средних приложений, редко меняющихся глобальных данных (тема, локализация, авторизация).
— **Redux** — для крупных приложений с комплексной логикой, частыми обновлениями состояния и необходимостью отладки.
— **Zustand / Jotai / Recoil** — современные альтернативы, сочетающие простоту Context и мощь Redux.

Таким образом, Props Drilling — не критическая ошибка, но серьёзная проблема масштабируемости. Context API и Redux позволяют организовать передачу данных элегантно, без засорения промежуточных компонентов.