أكتشف قوة الـ Context API فى React

[x32x01]

تخيل معايا كده عندك موقع كبير وبتحاول تبعت بيانات معينة (زي اسم المستخدم مثلا) من Component الأب لكل Component ابن، لحد ما توصل لواحد تحت خالص في الTree. في الأول الدنيا كانت بسيطة بتحط الـ Props في Component الأب وبتمشي بيها وحدة وحدة. لكن كل ما الموقع بيكبر كل ما تلاقي نفسك بتعمل حاجة اسمها Prop Drilling. يعني إيه؟ يعني بتفضل تبعت الـ Props دي من Component للتاني لمجرد إنك عايز توصلها لواحد تحت في الTree وفي النص فيه Components مش هتستخدمها أصلا.
هنا بقى بييجي دور الـ Context API

يعني إيه Context API؟​

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

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

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

1. إنشاء الـ Context:
أول خطوة بنعملها هي إننا ننشئ الـ Context

const UserContext = React.createContext();

2. توفير الـ Context:
لازم تحدد البيانات اللي هتمر من خلالها. فبنستخدم حاجة اسمها الـ Provider اللي بيغلف كل ال Components اللي محتاجة البيانات.

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

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

3. استهلاك البيانات:
لما ال Components اللي تحت عايزة تستقبل البيانات، بتستخدم حاجة اسمها useContext.

const user = useContext(UserContext);

هديلك مثال عملي يا صديقي:
نفترض إنك عندك تطبيق وفيه بيانات عن المستخدم، ومحتاج تشاركها بين كذا Component.

// إنشاء الـ 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 زي ما قلنا في الأول الـ Context بتمنعنا من تمرير الـ Props بشكل متكرر وغير ضروري بين الـ Components وده بيخلي الكود أنضف وأسهل في التعديل بعدين.
2. لما يبقى عندك بيانات زي المستخدم الحالي أو لغة التطبيق أو الثيم اللي بتستخدمه، دي بتكون بيانات Global وبتحتاج تشاركها بين مكونات كتير. الـ Context بيساعدك في إدارة البيانات دي.

نصائح عملية:
- بلاش تستخدم الـ Context في كل حاجة خلي الـ Context للحاجات اللي فعلا محتاجين نشاركها بين كذا Component. مش كل حاجة ينفع تتحط في الـ Context.
- لو عندك أكتر من نوع بيانات قسم الـ Context يعني لو عندك بيانات المستخدم واللغة والثيم، ممكن تعمل 3 Contexts منفصلين بدل ما تحط كل حاجة في واحد، عشان الكود يبقى أوضح.
- استخدم الـ useContext بحذر حاول بقدر الإمكان تخلي استخدام الـ Context عند الحاجة لاستخدامها بس عشان متزودش الـ Re-render اللي ممكن تأثر على الأداء.
وبكده نكون خلصنا شرحنا عن الـ Context API. لو عندك سؤال أو استفسار، اكتب في الكومنتات.