Prop drilling yaiku ngirim data liwat akeh komponen antarane sing ora nggunakake dhewe, mung kanggo tekan komponen sing nested jero sing butuh. Iku ngegresi lan gawe komponen kagawengan erat karo data sing ora perlu.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, lan Nav kudu nampa lan terusan user senajan ora nggunakake — rame, gampang rusak (ganti jeneng prop lan owah saben lapis), lan gabung komponen sing ora ana gandhengane.
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 ngliloni sapa wae keturunan bisa maca nilai langsung, nglintasi lapis antarane.
✓ 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.
Prop drilling minangka masalah umum sing tandha data dibutuhake luas — ngerti iku ngomong yen wektu nggunakake Context, library state, utawa composition.
Milangi (yen tunggal jero) gawe komponen bébas lan gampang diurus.
Nanging pertimbanganane penting: drilling ndhes iku trima lan luwih pranyoto ketimbang abstraksi cepet; tujuwane ngilang ngirim jero lan bola, ora kabeh ngirim prop.