Prop drilling هي تمرير البيانات عبر عدة مكونات وسيطة لا تستخدمها بنفسها، فقط للوصول إلى مكون متداخل بعمق يستخدمها فعلاً. إنها مملة وتجعل المكونات مرتبطة بإحكام ببيانات لا تهتم بها.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout، Header، و Nav يجب أن تقبل وتمرر user حتى لو لم تستخدمه — مزعج، هش (أعد تسمية الخاصية وعدّل كل طبقة)، وربط مكونات غير مرتبطة.
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 يسمح لأي عنصر نسل بقراءة القيمة مباشرة، متجاوزاً الطبقات الوسيطة.
✓ 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 مشكلة شائعة تشير إلى أن البيانات مطلوبة على نطاق واسع — التعرف عليها يخبرك متى تلجأ إلى Context أو مكتبة حالة أو التكوين.
تجنبها (عندما تكون بعمق حقيقي) يبقي المكونات مفككة وسهلة الصيانة.
لكن الحكم يهم: الحفر الضحل مقبول وأبسط من التجريد المبكر؛ الهدف هو القضاء على التمرير العميق والمتكرر، وليس كل تمرير خاصية.