React Context کو کیسے سیٹ اپ کریں
Prop drilling آپ کے کوڈ کو خراب کر دیتی ہے۔ آپ ڈیٹا کو ایسے پانچ تہوں (layers) والے کمپوننٹس کے ذریعے پاس کرتے ہیں جنہیں اس کی ضرورت نہیں ہوتی۔ React Context اس مسئلے کو حل کرتا ہے۔ تاہم، زیادہ تر سیٹ اپ ایک نیا مسئلہ پیدا کر دیتے ہیں۔
جب آپ کسی context hook پر "Go to Definition" استعمال کرتے ہیں، تو اکثر آپ ایک ایسی فائل میں پہنچ جاتے ہیں جہاں ایک چھوٹے سے useContext کال کے علاوہ کچھ نہیں ہوتا۔ اصل لاجک کسی دوسری فائل میں ہوتی ہے۔ آپ کا پورا دن state logic تلاش کرنے میں گزر جاتا ہے۔
آپ اسے ایک بہتر ڈھانچے (structure) کے ذریعے ٹھیک کر سکتے ہیں۔
اس پیٹرن پر عمل کریں:
- context، public hook، اور state logic کو ایک ہی فائل میں رکھیں۔
- Provider کو ایک باریک شیل (thin shell) کے طور پر رکھیں۔
- اپنی private logic کو محفوظ کرنے کے لیے ایک lint rule استعمال کریں۔
اپنی فائلوں کا ڈھانچہ اس طرح بنائیں:
src/context/ • GameContext.ts (Context، public hook، اور state logic) • GameProvider.tsx (ایک باریک شیل)
GameContext.ts کے اندر، تین حصے بنائیں:
- The context object۔
- کمپوننٹس کے استعمال کے لیے ایک public hook۔ اگر context null ہو تو اس hook کو error دینا چاہیے۔ اس سے یہ یقینی بنتا ہے کہ اگر آپ کے کمپوننٹس provider سے باہر ہوں تو وہ فوراً (fail fast) ایرر دے دیں۔
- state management کے لیے ایک private hook۔ اس hook میں آپ کے
useStateیاuseReducerکالز شامل ہوں گے۔
public hook اور private logic کو ایک ہی فائل میں رکھنے سے "Go to Definition" بالکل صحیح کام کرتا ہے۔ آپ براہ راست کمپوننٹ سے لاجک پر پہنچ جاتے ہیں۔
ایک خطرہ موجود ہے۔ چونکہ private hook کو export کیا جاتا ہے تاکہ Provider اسے استعمال کر سکے، اس لیے ٹیم کا کوئی رکن اسے غلط جگہ پر کال کر سکتا ہے۔ اگر وہ ایسا کرتے ہیں، تو وہ shared context استعمال کرنے کے بجائے ایک نیا اور الگ (isolated) state بنا دیتے ہیں۔
اسے روکنے کے لیے کمنٹس (comments) کا استعمال کرنا چھوڑ دیں۔ اس کے بجائے ایک ESLint rule استعمال کریں۔
میں نے اس مسئلے کو حل کرنے کے لیے eslint-plugin-restrict-callers بنایا ہے۔ آپ یہ طے کر سکتے ہیں کہ کن فنکشنز کو مخصوص hooks کال کرنے کی اجازت ہے۔
مثال کے طور پر، آپ ESLint کو بتا سکتے ہیں کہ صرف GameProvider ہی useGameStateManagement کو کال کر سکتا ہے۔ اگر کوئی اور کوشش کرتا ہے، تو بلڈ (build) ایک واضح ایرر میسج کے ساتھ فیل ہو جائے گا۔
ورک فلو کا خلاصہ:
- context، public hooks، اور private logic کو ایک فائل میں گروپ کریں۔
- Provider کو صرف hook کے نتیجے کو provider value میں پاس کرنے کے لیے استعمال کریں۔
- اگر context موجود نہ ہو تو public hook میں error دیں۔
- public اور private hooks کے درمیان حدود (boundaries) قائم کرنے کے لیے ESLint استعمال کریں۔
ماخذ: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h