Что такое Prop Drilling и как его избежать

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

Пример:

function App() {
  const user = { name: "Иван" };
  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <p>Привет, {user.name}!</p>;
}

Здесь Child использует user, но он передаётся через Parent, который сам его не использует — это и есть Prop Drilling.

Почему это может быть проблемой?

• Загрязнение компонентов — промежуточные компоненты получают ненужные пропсы
• Сложность сопровождения — при изменении данных нужно править много компонентов
• Уменьшение повторного использования — компоненты привязываются к пропсам, которые им не нужны
• Вероятность багов — при изменении структуры сложно отследить, где используются пропсы

Как избежать Prop Drilling?

React Context API

Контекст позволяет передавать данные на любой уровень вложенности, минуя промежуточные компоненты.

const UserContext = createContext(null);

function App() {
  const user = { name: "Иван" };

  return (
    <UserContext.Provider value={user}>
      <Parent />
    </UserContext.Provider>
  );
}

function Parent() {
  return <Child />;
}

function Child() {
  const user = useContext(UserContext);
  return <p>Привет, {user.name}!</p>;
}

Глобальное состояние (Zustand, Redux, Jotai, Recoil)

Подходит для более сложных приложений, где данных много и они нужны в разных частях.

// Zustand пример
const useUserStore = create((set) => ({
  user: { name: "Иван" },
}));

function Child() {
  const user = useUserStore((state) => state.user);
  return <p>Привет, {user.name}!</p>;
}

Композиция (render props, slots, hooks)

Иногда пропсы можно передать не напрямую, а с помощью функций или кастомных хуков, которые инкапсулируют логику.

Вывод

• Prop Drilling — избыточная передача пропсов по цепочке компонентов
• Проблема появляется при глубокой вложенности
• Избежать можно с помощью Context API, глобального состояния или композиции