എന്തുകൊണ്ടാണ് ഞാൻ TanStack Query പഠിക്കാൻ തുടങ്ങിയത്

ഞാൻ എന്തുകൊണ്ട് TanStack Query പഠിക്കാൻ തുടങ്ങി

ഞാൻ ഇന്ന് TanStack Query പഠിക്കാൻ തുടങ്ങി.

ഇത് നിങ്ങൾ React ആപ്പുകൾ നിർമ്മിക്കുന്ന രീതി മാറ്റുന്നു.

പല ഡെവലപ്പർമാരും ഇത് Redux പോലെ ഒരു state management ടൂൾ ആണെന്ന് കരുതുന്നു. എന്നാൽ അതല്ല. ഇത് മറ്റൊരു പ്രശ്നത്തിനാണ് പരിഹാരം കാണുന്നത്.

React ആപ്പുകൾ രണ്ട് തരത്തിലുള്ള state കൈകാര്യം ചെയ്യുന്നു:

• UI state: ബട്ടണുകൾ, മോഡലുകൾ, ഇൻപുട്ടുകൾ എന്നിവ. • Server state: ഉപയോക്താക്കൾ അല്ലെങ്കിൽ ഉൽപ്പന്നങ്ങൾ പോലുള്ള API-കളിൽ നിന്നുള്ള ഡാറ്റ.

മിക്ക ഡെവലപ്പർമാരും server state കൈകാര്യം ചെയ്യാൻ useState, useEffect അല്ലെങ്കിൽ Redux ഉപയോഗിക്കുന്നു. ഇത് പെട്ടെന്ന് സങ്കീർണ്ണമാകും. ഡാറ്റ മാറിക്കൊണ്ടിരിക്കുന്നതിനാലും, കാഷിംഗ് (caching) ആവശ്യമായതിനാലും, പരാജയപ്പെടാൻ സാധ്യതയുള്ളതിനാലും server ഡാറ്റ കൈകാര്യം ചെയ്യുന്നത് പ്രയാസകരമാണ്.

TanStack Query ഒരു server-state മാനേജറാണ്. ഇത് നിങ്ങൾക്കായി ഈ ജോലികൾ ചെയ്യുന്നു:

• ഡാറ്റ Fetch ചെയ്യുക • മറുപടികൾ (responses) Cache ചെയ്യുക • പഴയ ഡാറ്റ അപ്‌ഡേറ്റ് ചെയ്യുക • Background-ൽ refetch ചെയ്യുക • Error handling • Loading states • Retry logic

ലോഡിംഗ്, എറർ ലോജിക് എന്നിവ നിങ്ങൾ നേരിട്ട് എഴുതേണ്ടതില്ല. നിങ്ങൾക്ക് ആവശ്യമുള്ള ഡാറ്റ ഏതാണെന്ന് ആപ്പിനോട് പറഞ്ഞാൽ മാത്രം മതി.

ഈ ടൂൾ നിങ്ങളുടെ UI-നും API-നും ഇടയിൽ ഒരു സ്മാർട്ട് കാഷ് ലെയർ (cache layer) നിർമ്മിക്കുന്നു.

നിങ്ങളുടെ UI ഡാറ്റ ആവശ്യപ്പെടുമ്പോൾ, ടൂൾ ആദ്യം കാഷ് പരിശോധിക്കുന്നു. ഡാറ്റ അവിടെ ഉണ്ടെങ്കിൽ, അത് ഉടൻ തന്നെ കാണിക്കുന്നു. ഇത് നിങ്ങളുടെ ആപ്പിന് വേഗത നൽകുന്നു.

ഈ ടൂൾ ബാക്ക്ഗ്രൗണ്ടിൽ ഡാറ്റ അപ്‌ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു. ഇതിലൂടെ UI ഫ്ലിക്കർ (flicker) ചെയ്യാതെ തന്നെ എപ്പോഴും പുതുമയോടെ നിലനിൽക്കുന്നു.

ഇത് സങ്കീർണ്ണമായ സാഹചര്യങ്ങൾ സ്വയമേവ കൈകാര്യം ചെയ്യുന്നു:

• വിൻഡോയിൽ വീണ്ടും ഫോക്കസ് ചെയ്യുമ്പോൾ ഇത് refetch ചെയ്യുന്നു. • നെറ്റ്‌വർക്ക് വീണ്ടും കണക്ട് ചെയ്യുമ്പോൾ ഇത് refetch ചെയ്യുന്നു. • ഇന്റർനെറ്റ് വേഗത കുറവാണെങ്കിൽ ഇത് കാഷ് ചെയ്ത ഡാറ്റ കാണിക്കുന്നു.

സങ്കീർണ്ണമായ useEffect ഹുക്കുകൾ എഴുതുന്നതിന് പകരം, നിങ്ങൾക്ക് ഒരു ലളിതമായ വരി ഉപയോഗിക്കാം:

const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });

നിങ്ങൾക്ക് ഇത്രയും മതി.

മറ്റ് ടൂളുകൾ ലഭ്യമാണ്:

• Redux Toolkit: സങ്കീർണ്ണമായ UI ലോജിക്കിന് നല്ലതാണ്, എന്നാൽ server state-ന് അനുയോജ്യമല്ല. • SWR: എളുപ്പത്തിലുള്ള കാഷിംഗിനായി ഉപയോഗിക്കാവുന്ന ഒരു ലഘുവായ (lightweight) ബദൽ. • Apollo Client: GraphQL API-കൾക്ക് ഏറ്റവും അനുയോജ്യം.

നിങ്ങൾ REST API-കളുമായി പ്രവർത്തിക്കുകയും കുറഞ്ഞ കോഡ് ഉപയോഗിച്ച് വേഗതയേറിയ ഒരു UI നിർമ്മിക്കാൻ ആഗ്രഹിക്കുകയും ചെയ്യുന്നുണ്ടെങ്കിൽ TanStack Query ഉപയോഗിക്കുക.

ആധുനിക ഫ്രണ്ട്‌എൻഡ് ഡെവലപ്‌മെന്റ് എന്നത് പെർഫോമൻസിനെയും ഡാറ്റ സിങ്കിംഗിനെയും (data sync) കുറിച്ചുള്ളതാണ്. TanStack Query പ്രയാസകരമായ കാര്യങ്ങൾ കൈകാര്യം ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾക്ക് ഫീച്ചറുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാം.

കുറഞ്ഞ കോഡ് എഴുതുക എന്നതല്ല ലക്ഷ്യം. കൂടുതൽ സ്മാർട്ട് ആയ സിസ്റ്റങ്ങൾ നിർമ്മിക്കുക എന്നതാണ്.

Source: https://dev.to/usama_dev/why-i-started-learning-react-query-tanstack-query-today-5ceg