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 (एक पतली परत/thin shell)
GameContext.ts के अंदर, तीन भाग बनाएँ:
- Context object.
- कंपोनेंट्स के उपयोग के लिए एक public hook। यदि context null है, तो इस hook को एक error throw करना चाहिए। यह सुनिश्चित करता है कि यदि आपके कंपोनेंट्स provider के बाहर हैं, तो वे तुरंत fail हो जाएँ (fail fast)।
- State management के लिए एक private hook। इस hook में आपके
useStateयाuseReducerकॉल्स होते हैं।
Public hook और private logic को एक ही फ़ाइल में रखने से, "Go to Definition" पूरी तरह से काम करता है। आप सीधे कंपोनेंट से लॉजिक पर पहुँच जाते हैं।
एक जोखिम बना रहता है। क्योंकि private hook को export किया जाता है ताकि Provider उसका उपयोग कर सके, इसलिए कोई टीममेट इसे गलत जगह पर कॉल कर सकता है। यदि वे ऐसा करते हैं, तो वे साझा context का उपयोग करने के बजाय एक नया, अलग (isolated) state बना देते हैं।
इसे रोकने के लिए comments का उपयोग करना बंद करें। इसके बजाय एक ESLint rule का उपयोग करें।
मैंने इसे हल करने के लिए eslint-plugin-restrict-callers बनाया है। आप परिभाषित कर सकते हैं कि किन functions को विशिष्ट hooks को कॉल करने की अनुमति है।
उदाहरण के लिए, आप ESLint को बता सकते हैं कि केवल GameProvider ही useGameStateManagement को कॉल कर सकता है। यदि कोई और ऐसा करने की कोशिश करता है, तो build एक स्पष्ट error message के साथ विफल हो जाता है।
वर्कफ़्लो का सारांश:
- Context, public hooks, और private logic को एक ही फ़ाइल में समूहित (group) करें।
- Provider का उपयोग केवल hook के परिणाम को provider value में पास करने के लिए करें।
- यदि context गायब है, तो public hook में error throw करें।
- Public और private hooks के बीच सीमाएँ (boundaries) लागू करने के लिए ESLint का उपयोग करें।
Source: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h