var d=Object.defineProperty,c=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;var l=(e,n,s)=>n in e?d(e,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[n]=s,a=(e,n)=>{for(var s in n||(n={}))F.call(n,s)&&l(e,s,n[s]);if(t)for(var s of t(n))o.call(n,s)&&l(e,s,n[s]);return e},r=(e,n)=>c(e,m(n));var i=(e,n)=>{var s={};for(var p in e)F.call(e,p)&&n.indexOf(p)<0&&(s[p]=e[p]);if(e!=null&&t)for(var p of t(e))n.indexOf(p)<0&&o.call(e,p)&&(s[p]=e[p]);return s};const makeShortcode=e=>function(s){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",a({},s))},APIResponseLocalStorage=makeShortcode("APIResponseLocalStorage"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var p=s,{components:e}=p,n=i(p,["components"]);return mdx(MDXLayout,r(a(a({},layoutProps),n),{components:e,mdxType:"MDXLayout"}),mdx("p",null,"There are several ways to go about it, but the most common might be using the browser's local storage. It comes in handy when saving small-sized data like strings, arrays, objects, etc. It can save the data forever if you do not remove it."),mdx("p",null,"In this piece, let\u2019s look at how you can persist API response in a React.js application to avoid unnecessary API calls. So let\u2019s jump in!"),mdx("h2",a({},{id:"kind-of-api-response-to-persist"}),mdx("a",a({parentName:"h2"},{href:"#kind-of-api-response-to-persist"}),"Kind of API Response To Persist")),mdx("p",null,"We need to be clear about what kind of API data you should persist. Sometimes you know the API response will not change, for instance, the user\u2019s age, name, and email. If your application requires this information often, you can save it in the local storage to avoid unnecessary API calls. There are several other use-cases."),mdx("p",null,"Just to be cautious, you should still make the API call after some time if there is an update or delete the saved data inside the local storage when the user updates the data using the website. You can write code to check if the data exist in the local storage. If it doesn\u2019t, you can make the API call again."),mdx("h2",a({},{id:"persist-api-response"}),mdx("a",a({parentName:"h2"},{href:"#persist-api-response"}),"Persist API Response")),mdx("p",null,"Let\u2019s do it in steps to make things simpler:"),mdx("h3",a({},{id:"-step-1"}),mdx("a",a({parentName:"h3"},{href:"#-step-1"}),"\u2192 STEP #1")),mdx("p",null,"We need to get a React boilerplate. For this, run the following command in your terminal:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"npx create-react-app example-project"))))),mdx("p",null,"It will take some time, depending on your internet connection. Once it\u2019s done, open the project in your code editor."),mdx("h3",a({},{id:"-step-2"}),mdx("a",a({parentName:"h3"},{href:"#-step-2"}),"\u2192 STEP #2")),mdx("p",null,"Open ",mdx("inlineCode",{parentName:"p"},"App.js")," file located inside the ",mdx("inlineCode",{parentName:"p"},"src")," directory. This is the file where we will write the code. Remove all the code that is currently inside it. Now write a simple React component."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"UIComonent"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">;")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," UIComonent"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("h3",a({},{id:"-step-3"}),mdx("a",a({parentName:"h3"},{href:"#-step-3"}),"\u2192 STEP #3")),mdx("p",null,"The next thing that we need is to create two simple buttons. The first will make the API call, and the second will delete the local storage response."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"UIComponent"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onClick"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"callAPI"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Call API"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onClick"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"deleteData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Delete data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," UIComponent"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("p",null,"I have also attached event listeners to each button. Now we need to create the attached functions."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"UIComponent"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"user"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setUser"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"callAPI"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"try"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," response "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"fetch"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://jsonplaceholder.typicode.com/users/1"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," data "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"json"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," localStorage"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setItem"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"user"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"JSON"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"stringify"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"));")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUser"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"log"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"err"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"log"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"err"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"deleteData"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," window"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"localStorage"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"removeItem"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"user"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUser"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onClick"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"callAPI"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Call API"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onClick"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"deleteData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Delete"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"user "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"&&"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"pre"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">{"),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"JSON"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"stringify"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"user"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"4"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")}}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," UIComponent"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("p",null,"I have also created a state variable to save the API response in the above code snippet. Based on this variable, I have conditionally rendered the response on the screen. Inside the ",mdx("inlineCode",{parentName:"p"},"callAPI")," function, you can see that I have stored the response in the local storage. The ",mdx("inlineCode",{parentName:"p"},"deleteData")," deletes the information we have stored in the local storage."),mdx("h3",a({},{id:"-step-4"}),mdx("a",a({parentName:"h3"},{href:"#-step-4"}),"\u2192 STEP #4")),mdx("p",null,"Lastly, to retrieve the data from local storage before the component renders, we will use the React ",mdx("inlineCode",{parentName:"p"},"useEffect")," hook."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useEffect"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"if"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"window"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"localStorage"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"!=="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"undefined"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," data "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," window"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"localStorage"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getItem"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"user"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," data "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"!=="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"?"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUser"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"JSON"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"parse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"))"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"},"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"[]);"))))),mdx("p",null,"In the above code snippet, we have checked if the data exist in the local storage. If it exists, we retrieved it and set the value of the state variable."),mdx("p",null,"If you have followed along till this point, try to make the API call and then refresh the page. You will see that the API response will still render on the screen. Now click on the delete button and refresh the page. The response will not appear again."),mdx(APIResponseLocalStorage,{mdxType:"APIResponseLocalStorage"}),mdx("h2",a({},{id:"wrap-up"}),mdx("a",a({parentName:"h2"},{href:"#wrap-up"}),"Wrap Up")),mdx("p",null,"That\u2019s pretty much to it. We have successfully persisted API response using local storage. All the code we wrote above is the baseline code on top of which you can add more functionalities. For instance, you can call the API after some time or disable the ",mdx("inlineCode",{parentName:"p"},"Call API")," button like in the demo."))}MDXContent.isMDXComponent=!0;

open-api

What is OpenAPI spec?

There are different kinds of specifications available that you can use while building an API. Let's take a look at them in this piece.