Ответ
Prop Drilling — это передача пропсов через несколько уровней компонентов, когда промежуточные компоненты не используют эти данные, а просто передают их дальше. Это может усложнить поддержку кода.
Пример:
// Компонент-родитель
const Parent = () => {
const [user, setUser] = useState('John');
return <Child user={user} />;
};
// Промежуточный компонент (не использует user)
const Child = ({ user }) => {
return <Grandchild user={user} />;
};
// Компонент, которому нужны данные
const Grandchild = ({ user }) => {
return <div>{user}</div>;
};Решение проблемы:
- Использовать Context API
- Применять state-менеджеры (Redux, MobX)
- Компонентный composition (передача детей через
children)
Ответ 18+ 🔞
Да ты посмотри на эту дичь! Сидит себе программист, пишет компоненты, а они как матрёшки, только вместо красоты — сплошной пиздец. Это ж надо, данные тащить через всю иерархию, как воду в решете!
Смотри, вот тебе классика жанра, про которую даже Тургенев с его Герасимом бы ахуел. Есть у нас Parent, хранит какую-то хуйню, ну, user там.
// Компонент-родитель
const Parent = () => {
const [user, setUser] = useState('John');
return <Child user={user} />;
};Дальше — Child. А этот, сука, вообще манда с ушами! Ему эти данные нахуй не сдались, но он их получает и, не глядя, пихает дальше, в Grandchild.
// Промежуточный компонент (не использует user)
const Child = ({ user }) => {
return <Grandchild user={user} />;
};И вот, наконец, Grandchild, который, блядь, один во всём этом цирке эти данные реально использует!
// Компонент, которому нужны данные
const Grandchild = ({ user }) => {
return <div>{user}</div>;
};Представляешь масштаб? Это как если бы тебе из кухни нужно было передать соль в спальню, но ты сначала суёшь её соседу, потом почтальону, потом коту, и только потом она доходит до цели. А все промежуточные звенья орут: «Нахуя мне эта соль?!»
И терпения ебать ноль поддерживать эту хуйню! Захотел переименовать пропс — иди по всей цепочке и везде меняй, блядь. Один пропустил — всё, пизда приложению.
Но выход есть, ёпта! Не надо быть таким Герасимом, который всё топит.
Можно взять Context API — это как глобальная доска объявлений. Положил данные туда, и любой компонент, даже самый глубокий, может их оттуда выковырять, минуя всех этих бесполезных посредников.
Можно притащить state-менеджеры вроде Redux или MobX. Это уже целые штабы управления состоянием, где всё лежит в одном предсказуемом месте. Никакого прокидывания, просто подключайся и бери что надо.
А самый элегантный способ, хитрая жопа, — компонентный composition. Вместо того чтобы пихать данные, ты пихаешь сразу готовые куски интерфейса (через children или слоты). Промежуточным компонентам вообще похуй, что у тебя внутри, они просто рендерят то, что им передали. Красота, блядь!
Так что не усложняй себе жизнь, как тот немой силач из рассказа. Иногда нужно не мочить проблему, а просто выбрать правильный инструмент.