Context API: شارك البيانات بسهولة في React

إزاي تستخدم Context API في React وتتجنب Prop Drilling ​

تخيل معايا كده عندك موقع كبير وبتحاول تبعت بيانات معينة زي اسم المستخدم من Component الأب لكل Component ابن، لحد ما توصل لواحد تحت في الـ Tree.

في البداية، كنت بتحط الـ Props في الأب وتمشي بيها خطوة خطوة. لكن كل ما الموقع كبر، هتلاقي نفسك بتعمل حاجة اسمها Prop Drilling . يعني تبعت الـ Props من Component للتاني بس عشان توصل لواحد تحت في الـ Tree، وفي النص فيه Components مش هتستخدمها أصلا.

هنا بييجي دور Context API .

يعني إيه Context API؟ ​

الـ Context API في React بيسمحلك تشارك البيانات اللي محتاجها أكتر من Component من غير ما تعدي على كل مكون في الـ Tree.
يعني بدل ما تمرر البيانات يدوي لكل Component ابن في النص، تقدر توصلها مباشرة للـ Component اللي محتاجها.

تخيل كده: انت مدير لشركة وعاوز تبعت رسالة لموظف معين، بدل ما تبعت لكل موظف لحد ما توصل للموظف ده، Context هو الموظف اللي بياخد الرسالة ويوصلها مباشرة .

---

إزاي نستخدم Context API؟ ​

1. إنشاء الـ Context:​

const UserContext = React.createContext();

2. توفير الـ Context (Provider):​

<UserContext.Provider value={user}> <App />
</UserContext.Provider>

ده معناه إن أي Component جوه الـ Tree يقدر يوصل للبيانات دي بسهولة.

3. استهلاك البيانات (useContext):​

const user = useContext(UserContext);

مثال عملي ​

// إنشاء الـ Context
const UserContext = React.createContext();

// Component الأب
function App() {
const user = { name: "مجدي", age: 21 };

return (
<UserContext.Provider value={user}> <UserProfile />
</UserContext.Provider>
);
}

// Component الابن
function UserProfile() {
const user = useContext(UserContext);

return ( <div> <h1>الاسم: {user.name}</h1> <p>العمر: {user.age}</p> </div>
);
}

في المثال ده، بدل ما نمرر البيانات عبر كل الـ Components، استخدمنا الـ Context عشان نوصل البيانات لـ UserProfile مباشرة. والأحلى إن لو البيانات اتغيرت، React هتحدث الـ UI تلقائي .

---

ليه نستخدم Context API؟ ​

1. لتجنب الـ Prop Drilling والـ Props المتكررة بين الـ Components.
2. لمشاركة بيانات Global زي:
   1. المستخدم الحالي
   2. لغة التطبيق
   3. الثيم

نصائح عملية ​

• استخدم Context للحاجات اللي فعلا محتاج تشاركها بين أكتر من Component.
• لو عندك أكتر من نوع بيانات، اعمل Context منفصل لكل نوع (مثال: المستخدم، اللغة، الثيم).
• استخدم useContext بحذر لتقليل الـ Re-render والحفاظ على الأداء .

الخلاصة ​

الـ Context API بيخليك توصل البيانات لأي Component بسهولة من غير Prop Drilling، ويخلي الكود أنضف وأسهل للصيانة.
لو عندك سؤال أو استفسار، اكتب في الكومنتات