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

Пример

import React from "react";

// Родительский компонент, который хранит сообщение и передает его ниже
function Parent() {
    const message = "Hello from Parent";
    return (
        

            
        
    );
}

function Child({ message }) {
    return (
        

            
        
    );
}

function Grandchild({ message }) {
    return (
        

            
Message: {message}
        
    );
}

export default function App() {
    return (
        

            
        
    );
}

Вывод

Message: Hello from Parent

В этом примере сообщение передаётся от Parent к Grandchild через Child, хотя Child его не использует. При увеличении масштаба приложения это может стать трудноуправляемым.

Почему prop drilling – проблема?

Prop drilling вызывает проблемы, так как:

• Сложность кода: промежуточные компоненты принимают и передают props без использования, что загромождает код и создаёт путаницу.
• Повышенная стоимость поддержки: любые изменения в props требуют обновления множества компонентов. Это занимает много времени и увеличивает риск ошибок.
• Потеря читаемости: становится трудно отследить, как и где данные проходят через компоненты, что усложняет отладку и разработку.
• Жёсткая связность компонентов: компоненты становятся менее переиспользуемыми, связаны жёстко, что снижает гибкость и усложняет рефакторинг.
• Проблемы масштабируемости: по мере роста приложения проблема prop drilling усугубляется, усложняя масштабирование.

Как избежать проблемы prop drilling?

Ниже приведены несколько способов избежать prop drilling:

1. Использование Context API

React Context API позволяет обмениваться данными (например, состоянием, функциями или константами) между компонентами без явной передачи props.

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

const App = () => {
    const userName = 'geeksforgeeks';
    return (
        
            
        
    );
};

const Parent = () => ;

const Child = () => ;

const GrandChild = () => {
    const userName = useContext(UserContext); // Получаем значение из контекста
    return 
Hello, {userName}!
;
};

export default App;

Вывод

Hello, geeksforgeeks!

Примечания к примеру:

• createContext() создаёт контекст UserContext для обмена данными между компонентами.
• Компонент App использует UserContext.Provider для передачи значения userName (‘geeksforgeeks’).
• Компоненты Parent, Child и GrandChild вложены в провайдер.
• GrandChild получает значение из контекста с помощью useContext(UserContext).
• Значение выводится в теге <p> как «Hello, geeksforgeeks!».

2. Использование кастомных хуков

Кастомные хуки — это переиспользуемые функции в React, которые инкапсулируют состояние и логику. Они всегда начинаются с «use» (например, useFetch). Это позволяет улучшить переиспользуемость кода, держать компоненты чистыми и облегчает обмен логикой между ними.

import React, { createContext, useContext } from "react";

const UserContext = createContext();

const useUser = () => {
  return useContext(UserContext);
};

const App = () => {
  const userName = "GeeksforGeeks";

  return (
    
      
    
  );
};

const Component = () => ;

const Child = () => ;

const Grand = () => {
  const userName = useUser();
  return 
Hello, {userName}!
;
};

export default App;

Вывод

Hello, GeeksforGeeks!

Объяснение:

• createContext() создает UserContext для обмена данными.
• useUser() — кастомный хук, который упрощает доступ к useContext(UserContext).
• Компонент App предоставляет значение контекста («GeeksforGeeks»).
• Вложенные компоненты (Component, Child, Grand) наследуют значение контекста.
• Grand обращается к значению через useUser() и выводит приветствие.

3. Глобальное управление состоянием (Redux, Zustand, MobX)

Этот подход предусматривает использование библиотек, таких как Redux, Zustand или MobX, для управления состоянием всего приложения на глобальном уровне. Это полностью исключает необходимость prop drilling.

// store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
    name: "user",
    initialState: { name: "Amit", age: 30 },
    reducers: {}
});

const store = configureStore({
    reducer: {
        user: userSlice.reducer
    }
});

export default store;

// app.js
import React from "react";
import Header from "./components/Header";

function App() {
    return (
        

            
React Redux App
            

        
    );
}

export default App;

// Header.js
import React from "react";
import UserProfile from "./UserProfile";

function Header() {
    return (
        

            
Header Component
            
        
    );
}

export default Header;

// UserProfile.js
import React from "react";
import { useSelector } from "react-redux";

function UserProfile() {
  const user = useSelector((state) => state.user);

  return (
    

      
User Profile
      
Name: {user.name}
      
Age: {user.age} years old
    
  );
}

export default UserProfile;

Вывод

User Profile
Name: Amit
Age: 30 years old

Разбор кода:

• store.js: создаёт Redux store с начальными данными пользователя { name: "Amit", age: 30 }.
• App.jsx: использует провайдер Redux для глобального доступа к store во всех дочерних компонентах.
• UserProfile.jsx: напрямую получает данные пользователя из Redux store с помощью хука useSelector и отображает их.

Заключение

Prop drilling может усложнить ваши React-приложения, делая их труднее для поддержки и масштабирования. Используя современные методы — такие как Context API, библиотеки управления состоянием или кастомные хуки — вы сможете упростить обмен данными между компонентами. Применение этих подходов помогает создавать более чистые, эффективные и удобные в поддержке React-приложения.