Что такое prop drilling и как его избежать?

Question

Accepted Answer

**Prop drilling** — это передача данных через множество промежуточных компонентов, которые их сами не используют, только чтобы добраться до глубоко вложенного компонента, который их использует. Это утомительно и делает компоненты тесно связанными с данными, которые им не нужны. ## Проблема ```jsx // `user` is only needed by Avatar, but must pass through every layer function App() { const [user] = useState({ name: "Ann" }); return ; // App → Layout } function Layout({ user }) { return

; // Layout → Header (doesn't use it) } function Header({ user }) { return

; // Header → Nav (doesn't use it) } function Nav({ user }) { return ; // FINALLY used here } ``` `Layout`, `Header` и `Nav` должны принять и передать `user`, хотя они его не используют — шумно, хрупко (переименуй prop и отредактируй каждый слой), и связывает несвязанные компоненты. ## Решение 1: Context (встроенный) ```jsx const UserContext = createContext(null); function App() { const [user] = useState({ name: "Ann" }); return ( {/* provide once at the top */} {/* no user prop needed anywhere */} ); } function Avatar() { const user = useContext(UserContext); // consume directly, skip the middle return {user.name}

; } ``` Context позволяет любому потомку прямо читать значение, обходя промежуточные слои. ## Решение 2 и далее ```text ✓ Context API → for app-wide/subtree data (theme, user, locale) ✓ State libraries → Zustand/Redux/Jotai — components subscribe to the store directly ✓ Component composition → pass JSX as children instead of data through props ``` ```jsx // composition: let the parent compose the tree, passing the leaf directly ``` ## Не переисправляй ```text A little prop drilling (1–2 levels) is FINE and often clearer than adding Context. Reach for Context/stores when drilling becomes deep or widespread. ``` ## Почему это важно Prop drilling — это распространённая проблема, которая сигнализирует, что данные нужны широко — признание этого подскажет тебе, когда использовать Context, библиотеку состояния или композицию. Избежание этого (когда это действительно глубоко) держит компоненты развязанными и поддерживаемыми. Но суждение имеет значение: неглубокое дриллинг приемлем и проще, чем преждевременная абстракция; цель — устранить *глубокое, повторяющееся* проксирование, а не все передачи props.