const{Fragment:i,jsx:h,jsxs:s}=arguments[0];function _createMdxContent(e){const l={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...e.components};return s(i,{children:[h(l.h2,{id:"introduction",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#introduction",children:"Introduction"})}),"\n",h(l.p,{children:"Fetching data is one of the most common things you do in React."}),"\n",h(l.p,{children:"At first, it feels simple. Fetch some data, store it in state, then render it on the page."}),"\n",h(l.p,{children:"But real applications usually need more than that. You start dealing with loading states, failed requests, caching, and refetching data without breaking the UI."}),"\n",s(l.p,{children:["In this post, we will start with the basic ",h(l.code,{children:"useEffect"})," approach, then move to React Query and compare the differences."]}),"\n",h(l.h2,{id:"fetching-data-with-useeffect",children:s(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#fetching-data-with-useeffect",children:["Fetching Data with ",h(l.code,{children:"useEffect"})]})}),"\n",h(l.h3,{id:"basic-example",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#basic-example",children:"Basic Example"})}),"\n",s(l.p,{children:["The most common way to fetch data in React is with ",h(l.code,{children:"useEffect"}),"."]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:h(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-dark github-light",children:s(l.code,{"data-language":"jsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { useEffect, useState } "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "react"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Users"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"users"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setUsers"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"([]);"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useEffect"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(() "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" fetch"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"https://jsonplaceholder.typicode.com/users"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"then"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"res"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" res."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"json"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"())"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"then"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"data"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setUsers"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(data));"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }, []);"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"ul"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {users."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"map"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"user"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"li"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{user.id}>{user.name}"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ))}"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),"\n",h(l.p,{children:"This works fine for smaller projects."}),"\n",h(l.p,{children:"When the component mounts, the request runs and the response gets stored into state."}),"\n",h(l.h3,{id:"the-problem",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#the-problem",children:"The Problem"})}),"\n",h(l.p,{children:"The issue is that this only handles the happy path."}),"\n",h(l.p,{children:"There is no loading state, no error handling, and no feedback for users while the request is happening."}),"\n",h(l.p,{children:"If the API is slow or fails completely, the page just sits there empty."}),"\n",h(l.h2,{id:"adding-loading-and-error-states",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#adding-loading-and-error-states",children:"Adding Loading and Error States"})}),"\n",h(l.h3,{id:"improving-the-experience",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#improving-the-experience",children:"Improving the Experience"})}),"\n",h(l.p,{children:"A more realistic version usually includes loading and error handling."}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:h(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-dark github-light",children:s(l.code,{"data-language":"jsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { useEffect, useState } "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "react"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Users"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"users"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setUsers"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"([]);"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"isLoading"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setIsLoading"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"true"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"isError"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setIsError"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"false"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useEffect"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(() "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" fetch"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"https://jsonplaceholder.typicode.com/users"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"then"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"res"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" if"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"!"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"res.ok) "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"throw"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Error"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"Failed to fetch"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" res."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"json"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"();"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" })"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"then"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"data"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setUsers"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(data);"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setIsLoading"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"false"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" })"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"catch"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(() "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setIsError"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"true"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setIsLoading"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"false"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" });"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }, []);"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" if"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" (isLoading) "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"p"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Loading...;"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" if"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" (isError) "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"p"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Something went wrong.;"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"ul"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {users."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"map"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"user"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"li"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{user.id}>{user.name}"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ))}"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),"\n",h(l.p,{children:"This already feels much better for users."}),"\n",h(l.p,{children:"The UI now communicates what is happening instead of silently failing."}),"\n",h(l.h3,{id:"repetitive-logic",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#repetitive-logic",children:"Repetitive Logic"})}),"\n",h(l.p,{children:"The downside is that this pattern gets repetitive quickly."}),"\n",h(l.p,{children:"Almost every fetch request starts needing:"}),"\n",s(l.ul,{children:["\n",h(l.li,{children:"Loading state"}),"\n",h(l.li,{children:"Error state"}),"\n",h(l.li,{children:"Retry handling"}),"\n",h(l.li,{children:"Refetch logic"}),"\n"]}),"\n",h(l.p,{children:"After building a few pages, you end up rewriting the same structure repeatedly."}),"\n",h(l.p,{children:"That is one of the main reasons libraries like React Query became popular."}),"\n",h(l.h2,{id:"introducing-react-query",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#introducing-react-query",children:"Introducing React Query"})}),"\n",h(l.h3,{id:"installing-react-query",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installing-react-query",children:"Installing React Query"})}),"\n",h(l.p,{children:"First, install the package:"}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:h(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark github-light",children:h(l.code,{"data-language":"bash","data-theme":"github-dark github-light",style:{display:"grid"},children:s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"npm"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" install"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" @tanstack/react-query"})]})})})}),"\n",s(l.p,{children:["Then wrap your app with ",h(l.code,{children:"QueryClientProvider"}),"."]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:h(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-dark github-light",children:s(l.code,{"data-language":"jsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { QueryClient, QueryClientProvider } "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "@tanstack/react-query"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Users "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "./Users"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" queryClient"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" QueryClient"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"();"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" App"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"QueryClientProvider"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" client"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{queryClient}>"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Users"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),"\n",h(l.h2,{id:"fetching-with-usequery",children:s(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#fetching-with-usequery",children:["Fetching with ",h(l.code,{children:"useQuery"})]})}),"\n",h(l.h3,{id:"cleaner-fetch-logic",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#cleaner-fetch-logic",children:"Cleaner Fetch Logic"})}),"\n",s(l.p,{children:["Now we can rewrite the same example using ",h(l.code,{children:"useQuery"}),"."]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:h(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-dark github-light",children:s(l.code,{"data-language":"jsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { useQuery } "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "@tanstack/react-query"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Users"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"data"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"isLoading"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"isError"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" } "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useQuery"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"({"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" queryKey: ["}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"users"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"],"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" queryFn"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": () "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" fetch"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"https://jsonplaceholder.typicode.com/users"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"then"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"res"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" if"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"!"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"res.ok) "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"throw"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Error"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"Network error"'}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:");"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" res."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"json"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"();"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }),"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" });"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" if"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" (isLoading) "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"p"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Loading...;"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" if"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" (isError) "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"p"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Error fetching users.;"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"ul"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {data."}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"map"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(("}),h(l.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"user"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),h(l.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"li"}),h(l.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),h(l.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{user.id}>{user.name}"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ))}"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),"\n",h(l.p,{children:"The component becomes noticeably cleaner."}),"\n",h(l.p,{children:"We no longer manage loading or error state manually because React Query handles them for us."}),"\n",h(l.h3,{id:"built-in-features",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#built-in-features",children:"Built-in Features"})}),"\n",h(l.p,{children:"React Query also gives us features like:"}),"\n",s(l.ul,{children:["\n",h(l.li,{children:"Caching"}),"\n",h(l.li,{children:"Background refetching"}),"\n",h(l.li,{children:"Retry logic"}),"\n",h(l.li,{children:"Request deduplication"}),"\n",h(l.li,{children:"Devtools"}),"\n"]}),"\n",h(l.p,{children:"Without React Query, most of these would need to be implemented manually."}),"\n",h(l.h2,{id:"comparing-both-approaches",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#comparing-both-approaches",children:"Comparing Both Approaches"})}),"\n",s(l.table,{children:[h(l.thead,{children:s(l.tr,{children:[h(l.th,{children:"Feature"}),h(l.th,{children:"useEffect + fetch"}),h(l.th,{children:"React Query"})]})}),s(l.tbody,{children:[s(l.tr,{children:[h(l.td,{children:"Data fetching"}),h(l.td,{children:"✅"}),h(l.td,{children:"✅"})]}),s(l.tr,{children:[h(l.td,{children:"Loading state"}),h(l.td,{children:"Manual"}),h(l.td,{children:"Built-in"})]}),s(l.tr,{children:[h(l.td,{children:"Error handling"}),h(l.td,{children:"Manual"}),h(l.td,{children:"Built-in"})]}),s(l.tr,{children:[h(l.td,{children:"Caching"}),h(l.td,{children:"❌"}),h(l.td,{children:"✅"})]}),s(l.tr,{children:[h(l.td,{children:"Background refetching"}),h(l.td,{children:"❌"}),h(l.td,{children:"✅"})]}),s(l.tr,{children:[h(l.td,{children:"Retry logic"}),h(l.td,{children:"❌"}),h(l.td,{children:"✅"})]}),s(l.tr,{children:[h(l.td,{children:"Boilerplate"}),h(l.td,{children:"High"}),h(l.td,{children:"Lower"})]})]})]}),"\n",h(l.h2,{id:"final-thoughts",children:h(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#final-thoughts",children:"Final Thoughts"})}),"\n",s(l.p,{children:["Using ",h(l.code,{children:"useEffect"})," is still completely fine for simpler applications."]}),"\n",h(l.p,{children:"But as projects grow, manually managing fetch logic becomes repetitive pretty quickly."}),"\n",h(l.p,{children:"React Query simplifies a lot of that work by handling caching, loading states, retries, and synchronization out of the box."}),"\n",h(l.p,{children:"If you want to explore more advanced features like mutations, pagination, or optimistic updates, the official docs are worth checking out."}),"\n",s(l.p,{children:["React Query Docs: ",h(l.a,{href:"https://tanstack.com/query/latest",children:"https://tanstack.com/query/latest"})]}),"\n",h(l.hr,{}),"\n",h(l.p,{children:"Image by Mike Yukhtenko"})]})}return{toc:[{depth:2,value:"Introduction"},{depth:2,value:"Fetching Data with useEffect",children:[{depth:3,value:"Basic Example"},{depth:3,value:"The Problem"}]},{depth:2,value:"Adding Loading and Error States",children:[{depth:3,value:"Improving the Experience"},{depth:3,value:"Repetitive Logic"}]},{depth:2,value:"Introducing React Query",children:[{depth:3,value:"Installing React Query"}]},{depth:2,value:"Fetching with useQuery",children:[{depth:3,value:"Cleaner Fetch Logic"},{depth:3,value:"Built-in Features"}]},{depth:2,value:"Comparing Both Approaches"},{depth:2,value:"Final Thoughts"}],default:function(i={}){const{wrapper:s}=i.components||{};return s?h(s,{...i,children:h(_createMdxContent,{...i})}):_createMdxContent(i)}};

Data Fetching in React

How to work with me