Qu'est-ce que le prop drilling et comment l'éviter ?

Question

Accepted Answer

**Le prop drilling** est la pratique de transmettre des données à travers plusieurs composants intermédiaires qui ne les utilisent pas, juste pour les acheminer vers un composant profondément imbriqué qui en a besoin. C'est fastidieux et rend les composants étroitement couplés à des données dont ils ne se soucient pas. ## Le problème ```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` et `Nav` doivent tous accepter et transmettre `user` même s'ils ne l'utilisent pas — bruyant, fragile (renommer la prop et éditer chaque couche), et couplage de composants sans relation. ## Solution 1 : Context (intégré) ```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 permet à n'importe quel descendant de lire la valeur directement, en contournant les couches intermédiaires. ## Solution 2 et au-delà ```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 ``` ## Ne pas sur-corriger ```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. ``` ## Pourquoi c'est important Le prop drilling est une source de frustration courante qui signale que des données sont nécessaires largement — le reconnaître vous indique quand utiliser Context, une bibliothèque d'état ou la composition. L'éviter (quand c'est véritablement profond) garde les composants découplés et maintenables. Mais le jugement compte : le drilling peu profond est acceptable et plus simple qu'une abstraction prématurée ; l'objectif est d'éliminer le forwarding *profond et répétitif*, pas toute transmission de prop.