React Context કેવી રીતે સેટઅપ કરવું
Prop drilling તમારા કોડને બગાડે છે. તમે ડેટાને પાંચ લેયરના એવા ઘટકો (components) દ્વારા પસાર કરો છો જેને તેની જરૂર નથી. React Context આ સમસ્યાનું નિરાકરણ લાવે છે. જોકે, મોટાભાગના સેટઅપ એક નવી સમસ્યા ઊભી કરે છે.
જ્યારે તમે context hook પર "Go to Definition" નો ઉપયોગ કરો છો, ત્યારે તમે ઘણીવાર એવા ફાઇલમાં પહોંચી જાઓ છો જ્યાં માત્ર એક નાનકડો useContext કોલ હોય છે. વાસ્તવિક લોજિક (logic) બીજી ફાઇલમાં હોય છે. તમારે આખો દિવસ 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.
- components દ્વારા ઉપયોગ કરવા માટે એક public hook. જો context null હોય તો આ hook એ error આપવો જોઈએ. આ સુનિશ્ચિત કરે છે કે જો તમારા components provider ની બહાર હોય, તો તે તરત જ ભૂલ (fail fast) બતાવે.
- state management માટે એક private hook. આ hook માં તમારા
useStateઅથવાuseReducerકોલ્સ હોય છે.
public hook અને private logic ને એક જ ફાઇલમાં રાખવાથી, "Go to Definition" બરાબર કામ કરે છે. તમે સીધા component થી logic પર જઈ શકો છો.
એક જોખમ રહેલું છે. કારણ કે private hook ને export કરવામાં આવે છે જેથી Provider તેનો ઉપયોગ કરી શકે, તેથી તમારો સાથી (teammate) તેને ખોટી જગ્યાએ કોલ કરી શકે છે. જો તેઓ તેમ કરે છે, તો તેઓ shared context નો ઉપયોગ કરવાને બદલે એક નવું, અલગ (isolated) state બનાવી દેશે.
આને રોકવા માટે કોમેન્ટ્સનો ઉપયોગ કરવાનું બંધ કરો. તેના બદલે ESLint rule નો ઉપયોગ કરો.
આ સમસ્યાના ઉકેલ માટે મેં eslint-plugin-restrict-callers બનાવ્યું છે. તમે વ્યાખ્યાયિત કરી શકો છો કે કયા functions ને ચોક્કસ hooks ને કોલ કરવાની મંજૂરી છે.
ઉદાહરણ તરીકે, તમે ESLint ને કહી શકો છો કે માત્ર GameProvider જ useGameStateManagement ને કોલ કરી શકે છે. જો બીજું કોઈ પ્રયાસ કરે છે, તો બિલ્ડ (build) એક સ્પષ્ટ error message સાથે નિષ્ફળ જશે.
વર્કફ્લોનો સારાંશ:
- context, public hooks, અને private logic ને એક જ ફાઇલમાં ગ્રુપ કરો.
- Provider નો ઉપયોગ માત્ર hook ના પરિણામને provider value માં પસાર કરવા માટે કરો.
- જો context ખૂટતું હોય તો public hook માં error આપો.
- public અને private hooks વચ્ચેની સીમાઓ (boundaries) નક્કી કરવા માટે ESLint નો ઉપયોગ કરો.
Source: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h