9:["$","section",null,{"className":"w-full h-fit-content py-4 px-4","children":["$","div",null,{"className":"px-4 md:px-6 prose prose-h2:text-xl prose-h3:text-lg prose-slate mx-auto text-white/90","children":[["$","h2",null,{"className":"text-2xl text-red-800 mt-4 mb-0 text-center","children":"Efficient Data Fetching with SWR"}],["$","p",null,{"className":"mt-0 text-sm text-gray-600 text-center fotn-semibold","children":"February 1, 2025"}],["$","article",null,{"className":"text-gray-800 font-semibold text-justify text-sm md:text-base","children":[["$","h2",null,{"id":"introduction-to-swr","children":["$","a",null,{"href":"#introduction-to-swr","children":"Introduction to SWR"}]}],"\n",["$","p",null,{"children":"SWR (Stale-While-Revalidate) is a React hooks library for data fetching developed by Vercel. It provides an optimized, fast, and flexible approach to handling remote data in React applications."}],"\n",["$","p",null,{"children":"The key benefits of SWR include:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Automatic caching and revalidation"}],"\n",["$","li",null,{"children":"Background data updates"}],"\n",["$","li",null,{"children":"Focus revalidation (refreshing data when the user returns to the page)"}],"\n",["$","li",null,{"children":"Fast page navigation with instant state updates"}],"\n"]}],"\n",["$","h2",null,{"id":"basic-usage","children":["$","a",null,{"href":"#basic-usage","children":"Basic Usage"}]}],"\n",["$","p",null,{"children":"To get started with SWR, first install it:"}],"\n",["$","pre",null,{"children":["$","code",null,{"className":"hljs language-sh","children":"npm install swr\n"}]}],"\n",["$","p",null,{"children":"Then, use it inside a React component:"}],"\n",["$","pre",null,{"children":["$","code",null,{"className":"hljs language-tsx","children":[["$","span",null,{"className":"hljs-keyword","children":"import"}]," useSWR ",["$","span",null,{"className":"hljs-keyword","children":"from"}]," ",["$","span",null,{"className":"hljs-string","children":"\"swr\""}],";\n\n",["$","span",null,{"className":"hljs-keyword","children":"const"}]," ",["$","span",null,{"className":"hljs-title function_","children":"fetcher"}]," = (",["$","span",null,{"className":"hljs-params","children":["url: ",["$","span",null,{"className":"hljs-built_in","children":"string"}]]}],") => ",["$","span",null,{"className":"hljs-title function_","children":"fetch"}],"(url).",["$","span",null,{"className":"hljs-title function_","children":"then"}],"(",["$","span",null,{"className":"hljs-function","children":["(",["$","span",null,{"className":"hljs-params","children":"res"}],") =>"]}]," res.",["$","span",null,{"className":"hljs-title function_","children":"json"}],"());\n\n",["$","span",null,{"className":"hljs-keyword","children":"export"}]," ",["$","span",null,{"className":"hljs-keyword","children":"default"}]," ",["$","span",null,{"className":"hljs-keyword","children":"function"}]," ",["$","span",null,{"className":"hljs-title function_","children":"Profile"}],"(",["$","span",null,{"className":"hljs-params"}],") {\n ",["$","span",null,{"className":"hljs-keyword","children":"const"}]," { data, error } = ",["$","span",null,{"className":"hljs-title function_","children":"useSWR"}],"(",["$","span",null,{"className":"hljs-string","children":"\"/api/user\""}],", fetcher);\n\n ",["$","span",null,{"className":"hljs-keyword","children":"if"}]," (error) ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"Failed to load",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],";\n ",["$","span",null,{"className":"hljs-keyword","children":"if"}]," (!data) ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"Loading...",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],";\n\n ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"Welcome, {data.name}!",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],";\n}\n"]}]}],"\n",["$","h2",null,{"id":"handling-mutations","children":["$","a",null,{"href":"#handling-mutations","children":"Handling Mutations"}]}],"\n",["$","p",null,{"children":"SWR also allows you to update data optimistically using mutations:"}],"\n",["$","pre",null,{"children":["$","code",null,{"className":"hljs language-tsx","children":[["$","span",null,{"className":"hljs-keyword","children":"import"}]," useSWR, { mutate } ",["$","span",null,{"className":"hljs-keyword","children":"from"}]," ",["$","span",null,{"className":"hljs-string","children":"\"swr\""}],";\n\n",["$","span",null,{"className":"hljs-keyword","children":"const"}]," ",["$","span",null,{"className":"hljs-title function_","children":"fetcher"}]," = (",["$","span",null,{"className":"hljs-params","children":["url: ",["$","span",null,{"className":"hljs-built_in","children":"string"}]]}],") => ",["$","span",null,{"className":"hljs-title function_","children":"fetch"}],"(url).",["$","span",null,{"className":"hljs-title function_","children":"then"}],"(",["$","span",null,{"className":"hljs-function","children":["(",["$","span",null,{"className":"hljs-params","children":"res"}],") =>"]}]," res.",["$","span",null,{"className":"hljs-title function_","children":"json"}],"());\n\n",["$","span",null,{"className":"hljs-keyword","children":"export"}]," ",["$","span",null,{"className":"hljs-keyword","children":"default"}]," ",["$","span",null,{"className":"hljs-keyword","children":"function"}]," ",["$","span",null,{"className":"hljs-title function_","children":"Profile"}],"(",["$","span",null,{"className":"hljs-params"}],") {\n ",["$","span",null,{"className":"hljs-keyword","children":"const"}]," { data } = ",["$","span",null,{"className":"hljs-title function_","children":"useSWR"}],"(",["$","span",null,{"className":"hljs-string","children":"\"/api/user\""}],", fetcher);\n\n ",["$","span",null,{"className":"hljs-keyword","children":"const"}]," ",["$","span",null,{"className":"hljs-title function_","children":"updateProfile"}]," = ",["$","span",null,{"className":"hljs-keyword","children":"async"}]," (",["$","span",null,{"className":"hljs-params"}],") => {\n ",["$","span",null,{"className":"hljs-keyword","children":"const"}]," newUser = { ",["$","span",null,{"className":"hljs-attr","children":"name"}],": ",["$","span",null,{"className":"hljs-string","children":"\"Updated User\""}]," };\n ",["$","span",null,{"className":"hljs-title function_","children":"mutate"}],"(",["$","span",null,{"className":"hljs-string","children":"\"/api/user\""}],", newUser, ",["$","span",null,{"className":"hljs-literal","children":"false"}],");\n ",["$","span",null,{"className":"hljs-keyword","children":"await"}]," ",["$","span",null,{"className":"hljs-title function_","children":"fetch"}],"(",["$","span",null,{"className":"hljs-string","children":"\"/api/user\""}],", { ",["$","span",null,{"className":"hljs-attr","children":"method"}],": ",["$","span",null,{"className":"hljs-string","children":"\"POST\""}],", ",["$","span",null,{"className":"hljs-attr","children":"body"}],": ",["$","span",null,{"className":"hljs-title class_","children":"JSON"}],".",["$","span",null,{"className":"hljs-title function_","children":"stringify"}],"(newUser) });\n ",["$","span",null,{"className":"hljs-title function_","children":"mutate"}],"(",["$","span",null,{"className":"hljs-string","children":"\"/api/user\""}],");\n };\n\n ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," (\n ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"p"}],">"]}],"{data ? `Welcome, ${data.name}!` : \"Loading...\"}",["$","span",null,{"className":"hljs-tag","children":[""]}],"\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"button"}]," ",["$","span",null,{"className":"hljs-attr","children":"onClick"}],"=",["$","span",null,{"className":"hljs-string","children":"{updateProfile}"}],">"]}],"Update Profile",["$","span",null,{"className":"hljs-tag","children":[""]}],"\n ",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],"\n );\n}\n"]}]}],"\n",["$","h2",null,{"id":"using-swr-with-custom-fetchers","children":["$","a",null,{"href":"#using-swr-with-custom-fetchers","children":"Using SWR with Custom Fetchers"}]}],"\n",["$","p",null,{"children":"You can use different fetchers such as Axios:"}],"\n",["$","pre",null,{"children":["$","code",null,{"className":"hljs language-tsx","children":[["$","span",null,{"className":"hljs-keyword","children":"import"}]," useSWR ",["$","span",null,{"className":"hljs-keyword","children":"from"}]," ",["$","span",null,{"className":"hljs-string","children":"\"swr\""}],";\n",["$","span",null,{"className":"hljs-keyword","children":"import"}]," axios ",["$","span",null,{"className":"hljs-keyword","children":"from"}]," ",["$","span",null,{"className":"hljs-string","children":"\"axios\""}],";\n\n",["$","span",null,{"className":"hljs-keyword","children":"const"}]," ",["$","span",null,{"className":"hljs-title function_","children":"fetcher"}]," = (",["$","span",null,{"className":"hljs-params","children":["url: ",["$","span",null,{"className":"hljs-built_in","children":"string"}]]}],") => axios.",["$","span",null,{"className":"hljs-title function_","children":"get"}],"(url).",["$","span",null,{"className":"hljs-title function_","children":"then"}],"(",["$","span",null,{"className":"hljs-function","children":["(",["$","span",null,{"className":"hljs-params","children":"res"}],") =>"]}]," res.",["$","span",null,{"className":"hljs-property","children":"data"}],");\n\n",["$","span",null,{"className":"hljs-keyword","children":"export"}]," ",["$","span",null,{"className":"hljs-keyword","children":"default"}]," ",["$","span",null,{"className":"hljs-keyword","children":"function"}]," ",["$","span",null,{"className":"hljs-title function_","children":"Profile"}],"(",["$","span",null,{"className":"hljs-params"}],") {\n ",["$","span",null,{"className":"hljs-keyword","children":"const"}]," { data, error } = ",["$","span",null,{"className":"hljs-title function_","children":"useSWR"}],"(",["$","span",null,{"className":"hljs-string","children":"\"/api/user\""}],", fetcher);\n\n ",["$","span",null,{"className":"hljs-keyword","children":"if"}]," (error) ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"Failed to load",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],";\n ",["$","span",null,{"className":"hljs-keyword","children":"if"}]," (!data) ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"Loading...",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],";\n\n ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}],">"]}],"Welcome, {data.name}!",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],";\n}\n"]}]}],"\n",["$","h2",null,{"id":"conclusion","children":["$","a",null,{"href":"#conclusion","children":"Conclusion"}]}],"\n",["$","p",null,{"children":"SWR simplifies data fetching in React applications by providing an intuitive API and handling caching, revalidation, and background updates. It enhances performance and user experience, making it an essential tool for modern web development."}],"\n",["$","$L1b",null,{"src":"https://raw.githubusercontent.com/maryamHabibpourr/blogPost/main/images/swr.jpg","alt":"SWR Guide"}]]}],["$","section",null,{"className":"mt-4","children":[["$","h3",null,{"className":"text-red-800 font-bold text-lg","children":"Related Blogs:"}],["$","div",null,{"className":"flex flex-row gap-4 text-gray-600 font-semibold","children":[["$","$L5","0",{"href":"/tags/react","className":"text-color-3","children":"react"}],["$","$L5","1",{"href":"/tags/swr","className":"text-color-3","children":"swr"}],["$","$L5","2",{"href":"/tags/data-fetching","className":"text-color-3","children":"data-fetching"}]]}]]}],["$","p",null,{"className":"mb-10","children":["$","$L5",null,{"href":"/docs","className":"text-sm text-red-600","children":"← Back to Docs"}]}]]}]}]

Is anyone there?...

Mary Habibpour

Is anyone there?...

Mary Habibpour