Перейти на PRO

Что такое prop drilling в React и почему это считается антипаттерном

Тип вопроса: Паттерны Вероятность: 10% Категория: Python Разработчик

Ответ

Prop drilling (пробрасывание пропсов) — это процесс передачи данных из родительского компонента в глубоко вложенный дочерний компонент через несколько промежуточных компонентов, которым эти данные (пропсы) на самом деле не нужны.

Это считается антипаттерном, поскольку приводит к ряду проблем:

  • Избыточность и "шум" в коде: Промежуточные компоненты получают и передают пропсы, которые не используют, что усложняет их props и снижает читаемость.
  • Сложность рефакторинга: Если сигнатура данных изменится (например, переименуется поле), придется вносить правки во всей цепочке компонентов, а не только в тех, где эти данные реально используются.
  • Снижение переиспользуемости: Компоненты становятся тесно связанными со структурой данных, которую они "пробрасывают", что затрудняет их использование в других частях приложения.

Пример prop drilling:

// user передается через Page, хотя Page он не нужен
function App() {
  const user = { name: 'Alice' };
  return <Page user={user} />;
}

function Page({ user }) {
  return <UserProfile user={user} />;
}

function UserProfile({ user }) {
  return <Avatar user={user} />;
}

function Avatar({ user }) {
  return <span>{user.name}</span>;
}

Решения проблемы

Для избежания prop drilling используются техники управления состоянием:

  1. React Context API: Позволяет создать "провайдер" данных на верхнем уровне и "потребителя" на любом уровне вложенности, минуя промежуточные компоненты.
  2. State Management библиотеки (Redux, Zustand, MobX): Предоставляют централизованное хранилище (store), из которого любой компонент может получить необходимые данные напрямую.
  3. Композиция компонентов: Передача дочерних компонентов как пропсов (например, через props.children), что позволяет избежать явной передачи данных через промежуточные слои.

Ответ 18+ 🔞

Да ты посмотри на эту дичь, блядь! Prop drilling, ёпта! Это ж когда ты из родительского компонента, как через дырявую трубу, тащишь данные в самую глубь, в какого-нибудь правнука-пиздюка, а все промежуточные компоненты — они ж просто как курьеры, блядь, которые нихуя не понимают, что в пакете несут, но тащат, сука, потому что заказали!

Получается пиздец, а не архитектура:

  • Код превращается в помойку: Каждый промежуточный компонент обрастает кучей пропсов, которые ему нахуй не сдались. Открываешь его — а там user, theme, settings, onSomethingChange, а сам он только div рисует! Читать невозможно, блядь!
  • Рефакторить — это пиздец: Захотел переименовать поле user.name в user.username? Ну, готовься, мудила, пройтись по всей цепочке, по всем этим прослойкам, и везде поменять. Один пропустил — всё, приехали, ошибка. Ёперный театр!
  • Переиспользовать нихуя не получится: Хочешь взять этот красивый Avatar в другом месте? А он тебе: «А ну-ка дай сюда user!». А у тебя там данных-то таких нет, блядь! Компонент привязан к конкретной структуре, как собака на цепи.

Вот смотри, как это выглядит, реальный пример:

// Главный компонент, тут user живёт
function App() {
  const user = { name: 'Alice' };
  return <Page user={user} />; // Кинул user в Page
}

// Page'у user нахуй не нужен, но он его принимает и передаёт дальше
function Page({ user }) {
  return <UserProfile user={user} />; // Передал user в UserProfile
}

// UserProfile'у user тоже, в общем-то, не особо нужен, он только Avatar рендерит
function UserProfile({ user }) {
  return <Avatar user={user} />; // А вот и передача последней надежды!
}

// И только тут, в самой глубине, user наконец-то используется! Ура, блядь!
function Avatar({ user }) {
  return <span>{user.name}</span>;
}

Видишь эту хуйню? Page и UserProfile — они просто мальчики на побегушках, блядь! Никакой ценности, только шум создают.

Ну и как с этим бороться, спросишь ты?

А вот как, хитрая жопа:

  1. React Context API: Это как волшебный портал, ёбта. Создал контекст наверху, обернул всё в провайдера, и любой компонент в глубине может достать оттуда данные, не спрашивая разрешения у родителей. Прямо как в магазине самообслуживания, блядь — взял с полки и пошёл.
  2. Библиотеки управления состоянием (Redux, Zustand и прочие): Это уже центральный склад, ёпта. Всё состояние лежит в одном месте (store), и любой, у кого есть пропуск (хук useSelector или что-то подобное), может прийти и взять что надо. Никаких цепочек, никаких пробросов.
  3. Композиция компонентов: А это хитрый приём, блядь. Вместо того чтобы передавать данные через всех, ты передаёшь готовые куски интерфейса. Типа «вот тебе children, рендерь их где хочешь, а я уже внутри них всё необходимое прокину». Красота, а не жизнь!

Короче, prop drilling — это признак того, что пора остановиться, выдохнуть и подумать: «А не пора ли мне, блядь, состояние нормально организовать?». Иначе потом разбираться в этом коде будет тот ещё пиздец.

© ХакСобесов, 2026
support@hacksobesov.com