Prop drilling, verileri kendileri kullanmayan birçok ara bileşen aracılığıyla iletmek, sadece buna ihtiyaç duyan derinlemesine iç içe geçmiş bir bileşene ulaşmak için yapılan bir uygulamadır. Yorucu bir işlemdir ve bileşenleri umursamadıkları verilerle sıkı bir şekilde bağlar.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header ve Nav hepsi user öğesini kabul etmeli ve iletmeli, oysa onu kullanmıyorlar — gürültülü, kırılgan (prop adını değiştirin ve her katmanı düzenleyin) ve ilgisiz bileşenleri birbirine bağlama.
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, herhangi bir torun öğesinin değeri doğrudan okuyabilmesini, ara katmanları atlayabilmesini sağlar.
✓ 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, verilerin geniş bir şekilde gerekli olduğunu göstermek ortak bir sorun noktasıdır — bunu tanımak size Context, bir durum kütüphanesi veya bileşimi ne zaman kullanacağınızı söyler.
Bunu (gerçekten derin olduğunda) önlemek bileşenleri bağlantısız ve bakımını yapılabilir hâlde tutar.
Ancak muhakeme önemlidir: sığ drilling kabul edilebilir ve erken soyutlamadan daha basittir; amaç derin, tekrarlayan iletişimi ortadan kaldırmaktır, tüm prop geçişini değil.