Prop drilling adalah melewatkan data melalui banyak komponen perantara yang tidak menggunakannya sendiri, hanya untuk mencapainya ke komponen yang bersarang dalam yang membutuhkannya. Ini membosankan dan membuat komponen sangat bergantung pada data yang tidak mereka pedulikan.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, dan Nav semuanya harus menerima dan meneruskan user meskipun mereka tidak menggunakannya — berisik, rapuh (ubah nama prop dan edit setiap lapisan), dan menggabungkan komponen yang tidak terkait.
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 memungkinkan keturunan apa pun untuk membaca nilai secara langsung, melewati lapisan perantara.
✓ 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 adalah titik nyeri umum yang menunjukkan data dibutuhkan secara luas — mengenalinya memberi tahu Anda kapan menggunakan Context, pustaka state, atau komposisi.
Menghindarinya (ketika benar-benar dalam) membuat komponen tetap terisolasi dan mudah dipelihara.
Tapi penilaian penting: pengeboran dangkal dapat diterima dan lebih sederhana daripada abstraksi prematur; tujuannya adalah menghilangkan penerusan yang dalam dan berulang, bukan semua penerusan prop.