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

Ответ

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)