Що таке prop drilling і як його уникнути

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

Приклад:

tsx

function App() {
  const user = { name: "John" };
  return <Parent user={user} />;
}

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

function Child({ user }) {
  return <p>Hello, {user.name}!</p>;
}

Тут Child використовує user, але він передається через Parent, який сам його не використовує — це є Prop Drilling.

Чому це може бути проблемою?

Забруднення компонентів — проміжні компоненти отримують непотрібні пропси
Складність обслуговування — при зміні даних потрібно виправляти багато компонентів
Знижена повторна використуваність — компоненти прив'язані до пропсів, які їм не потрібні
Імовірність помилок — при зміні структури важко відстежити, де використовуються пропси

Як уникнути Prop Drilling?

React Context API

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

tsx

const UserContext = createContext(null);

function App() {
  const user = { name: "John" };

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

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

function Child() {
  const user = useContext(UserContext);
  return <p>Hello, {user.name}!</p>;
}

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

Підходить для більш складних додатків з великою кількістю даних, які потрібні в різних частинах.

tsx

// Приклад Zustand
const useUserStore = create((set) => ({
  user: { name: "John" },
}));

function Child() {
  const user = useUserStore((state) => state.user);
  return <p>Hello, {user.name}!</p>;
}

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

Іноді пропси можуть передаватися не безпосередньо, а за допомогою функцій або кастомних хуків, які інкапсулюють логіку.

Коли Prop Drilling є прийнятним:

Якщо передавати на 1-2 рівні вглиб — це нормально. Використовуйте контекст або глобальний стан тільки якщо це дійсно потрібно.

Висновок

Prop Drilling — надмірна передача пропсів через ланцюг компонентів
Проблема виникає при глибокій вкладеності
Можна уникнути за допомогою Context API, глобального стану або композиції

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке prop drilling і як його уникнути

#Чому це може бути проблемою?

#Як уникнути Prop Drilling?

#React Context API

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

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

#Висновок