Что такое Prop Drilling в React?

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

Как выглядит

const App = () => {
  const user = useUser();
  return <Layout user={user} />;      // Layout user не нужен
};
const Layout = ({ user }) => <Sidebar user={user} />;  // и Sidebar не нужен
const Sidebar = ({ user }) => <Menu user={user} />;    // и Menu не нужен
const Menu = ({ user }) => <Avatar user={user} />;     // нужен только здесь

Чем плох

• Хрупкость: изменение формата данных трогает всю цепочку.
• Зашумлённые интерфейсы: у компонентов появляются props «не про них»; сигнатуры врут о реальных зависимостях.
• Сцепленность: промежуточные компоненты нельзя переиспользовать без «транзитного груза».
• Рендеры: обновление данных прокатывает по всей цепочке.

Решения

Композиция (children/слоты) — часто лучшее: собрать дерево там, где данные есть, и передать готовые куски:

const App = () => {
  const user = useUser();
  return <Layout sidebar={<Menu avatar={<Avatar user={user} />} />} />;
};

Промежуточным компонентам больше не нужно знать про user.

Context — для «окружающих» данных (тема, пользователь, локаль): провайдер наверху, useContext у потребителя.

Стейт-менеджер / React Query — когда данные глобальны или серверные: компонент берёт их хуком напрямую.

Нюансы

Передача пропа на 1-2 уровня — не prop drilling, а нормальный поток данных; тянуть контекст на каждый чих не нужно. Проблема начинается, когда транзитных уровней много и они не используют данные.

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

Prop Drilling — протаскивание данных через компоненты, которым они не нужны. Лечится композицией (children/слоты — недооценённый вариант), контекстом для окружения (тема, пользователь) или прямым доступом через стор/React Query. 1-2 уровня передачи — норма, не повод для контекста.