Prop drilling è il passaggio di dati attraverso molti componenti intermedi che non li utilizzano, solo per raggiungerli a un componente annidato in profondità che ne ha bisogno. È tedioso e rende i componenti strettamente accoppiati a dati di cui non si curano.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header e Nav devono tutti accettare e inoltrare user anche se non lo utilizzano — rumoroso, fragile (rinominare la prop e modificare ogni livello), e accoppiamento di componenti non correlati.
const UserContext = createContext(null);
function App() {
const [user] = useState({ name: "Ann" });
return (
<UserContext.Provider value={user}> {/* provide once at the top */}
<Layout /> {/* no user prop needed anywhere */}
</UserContext.Provider>
);
}
function Avatar() {
const user = useContext(UserContext); // consume directly, skip the middle
return <img alt={user.name} />;
}
Context consente a qualsiasi discendente di leggere il valore direttamente, bypassando i livelli intermedi.
✓ 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
// composition: let the parent compose the tree, passing the leaf directly
<Layout><Nav><Avatar user={user} /></Nav></Layout>
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.
Il prop drilling è un problema comune che segnala che i dati sono necessari ampiamente — riconoscerlo ti dice quando ricorrere a Context, una libreria di state management, o composition.
Evitarlo (quando è veramente profondo) mantiene i componenti disaccoppiati e mantenibili.
Ma il giudizio è importante: il drilling superficiale è accettabile e più semplice di un'astrazione prematura; l'obiettivo è eliminare l'inoltro profondo e ripetitivo, non tutto il passaggio di prop.