मी TanStack Query शिकायला का सुरुवात केली

मी आज TanStack Query शिकायला सुरुवात केली.

हे तुम्ही React ॲप्स कसे बनवता हे पूर्णपणे बदलून टाकते.

अनेक डेव्हलपर्सना वाटते की हे Redux सारखे 'state management' टूल आहे. पण तसे नाहीये. ते एक वेगळी समस्या सोडवते.

React ॲप्स दोन प्रकारचे 'state' हाताळतात:

• UI state: बटणे, मॉडेल्स आणि इनपुट्स. • Server state: युजर्स किंवा प्रॉडक्ट्स सारख्या APIs कडून येणारा डेटा.

बहुतेक डेव्हलपर्स 'server state' मॅनेज करण्यासाठी useState, useEffect किंवा Redux वापरतात. यामुळे गोष्टी लवकरच गुंतागुंतीच्या होतात. 'Server data' हाताळणे कठीण असते कारण तो बदलत असतो, त्याला 'caching' ची गरज असते आणि तो कधीही फेल होऊ शकतो.

TanStack Query हे एक 'server-state manager' आहे. ते तुमच्यासाठी खालील कामे करते:

• डेटा फेच करणे (Fetching data) • रिस्पॉन्स कॅश करणे (Caching responses) • जुना डेटा अपडेट करणे • बॅकग्राउंड रिफेचिंग (Background refetching) • एरर हँडलिंग (Error handling) • लोडिंग स्टेट्स (Loading states) • रिट्राय लॉजिक (Retry logic)

तुम्हाला आता मॅन्युअली लोडिंग आणि एरर लॉजिक लिहिण्याची गरज नाही. तुम्हाला फक्त ॲपला सांगायचे आहे की तुम्हाला कोणता डेटा हवा आहे.

हे टूल तुमच्या UI आणि API मध्ये एक स्मार्ट 'cache layer' तयार करते.

जेव्हा तुमचे UI डेटा मागतं, तेव्हा हे टूल आधी कॅश तपासते. जर डेटा उपलब्ध असेल, तर ते तो त्वरित दाखवते. यामुळे तुमचे ॲप खूप वेगवान वाटते.

हे टूल बॅकग्राउंडमध्ये डेटा अपडेट देखील करते. यामुळे तुमचे UI फ्लिकर न होता नेहमी अपडेटेड राहते.

हे गुंतागुंतीच्या परिस्थिती आपोआप हाताळते:

• जेव्हा तुम्ही विंडोवर पुन्हा लक्ष केंद्रित करता (refocus), तेव्हा ते रिफेच करते. • जेव्हा नेटवर्क पुन्हा कनेक्ट होते, तेव्हा ते रिफेच करते. • इंटरनेट कनेक्शन कमकुवत असताना ते कॅश केलेला डेटा दाखवते.

गुंतागुंतीचे useEffect हुक्स लिहिण्याऐवजी, तुम्ही फक्त एक साधी ओळ वापरता:

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

तुम्हाला फक्त इतकेच हवे आहे.

इतर काही टूल्स उपलब्ध आहेत:

• Redux Toolkit: गुंतागुंतीच्या UI लॉजिकसाठी चांगले आहे पण 'server state' साठी आदर्श नाही. • SWR: सोप्या कॅशिंगसाठी एक हलका (lightweight) पर्याय. • Apollo Client: GraphQL APIs साठी सर्वोत्तम.

जर तुम्ही REST APIs सोबत काम करत असाल आणि कमी कोडमध्ये वेगवान UI हवे असेल, तर TanStack Query वापरा.

आधुनिक फ्रंटएंड डेव्हलपमेंट हे परफॉर्मन्स आणि डेटा सिंक (data sync) बद्दल आहे. TanStack Query कठीण भाग हाताळते जेणेकरून तुम्ही फीचर्सवर लक्ष केंद्रित करू शकाल.

कमी कोड लिहिणे हे ध्येय नाही. तर अधिक स्मार्ट सिस्टम्स तयार करणे हे ध्येय आहे.

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