[{"data":1,"prerenderedAt":1501},["ShallowReactive",2],{"\u002Fposts\u002Fdata-fetching":3,"posts-nav":1463},{"id":4,"title":5,"body":6,"date":1449,"description":1450,"draft":1451,"extension":1452,"meta":1453,"navigation":344,"path":1454,"seo":1455,"stem":1456,"subtitle":1457,"tags":1458,"__hash__":1462},"posts\u002Fposts\u002Fdata-fetching.md","Data fetching in React",{"type":7,"value":8,"toc":1437},"minimark",[9,13,16,21,50,53,56,61,64,72,110,113,157,160,202,209,219,222,225,231,360,363,373,385,391,394,417,420,423,611,614,617,632,635,649,653,656,659,662,666,669,672,675,696,707,710,926,929,932,949,952,955,957,959,961,963,965,968,1412,1415,1419,1422,1433],[10,11,12],"p",{},"With enough repetition and practice, difficult things can turn out to be the\neasiest things.",[10,14,15],{},"One of such is data fetching in React. This blog post is for React developers who do not understand the flow of data in React,\nespecially from external sources like API endpoints. This post is not to turn you into a data fetching wizard in React overnight,\nbut to give you a simple overview of what you need to feed a react component with data and how to seamlessly display it in your UI.",[17,18,20],"h2",{"id":19},"table-of-contents","Table of Contents",[22,23,24,32,38,44],"ul",{},[25,26,27],"li",{},[28,29,31],"a",{"href":30},"#how-do-i-fetch-data-in-javascript-","How do I fetch data in JavaScript",[25,33,34],{},[28,35,37],{"href":36},"#where-do-i-fetch-data-","Where do I fetch data",[25,39,40],{},[28,41,43],{"href":42},"#now-that-we-have-our-data-","Now that we have our data",[25,45,46],{},[28,47,49],{"href":48},"#what-to-do-next-","What to do next",[17,51,31],{"id":52},"how-do-i-fetch-data-in-javascript",[10,54,55],{},"The answer is pretty much in the question. JavaScript provides a native API for fetching data into your code.\nIf you skipped this while learning JavaScript, well here’s another opportunity to learn about it again.",[57,58,60],"h3",{"id":59},"the-fetch-api","The Fetch API",[10,62,63],{},"While there are various other tools, libraries for fetching data, we’d be considering JavaScript’s native API for fetching.\nThis API is called the fetch API, very obvious right.",[10,65,66,67,71],{},"JavaScript allows you to send network requests to the server and fetches the results or data from the server using the ",[68,69,70],"code",{},"fetch()"," method.\nTo do this, you’ll write some syntax like this:",[73,74,79],"pre",{"className":75,"code":76,"language":77,"meta":78,"style":78},"language-jsx shiki shiki-themes kanagawa-lotus","fetch(url, [options]);\n","jsx","",[68,80,81],{"__ignoreMap":78},[82,83,86,90,94,98,101,104,107],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"sRuoB","fetch",[82,91,93],{"class":92},"soh45","(",[82,95,97],{"class":96},"sE3-p","url",[82,99,100],{"class":92},",",[82,102,103],{"class":92}," [",[82,105,106],{"class":96},"options",[82,108,109],{"class":92},"]);\n",[10,111,112],{},"You’ll want to store the result from this network request inside a variable, so\nlet’s take it a step further by writing something like this:",[73,114,116],{"className":75,"code":115,"language":77,"meta":78,"style":78},"\u002F\u002F Store fetch result inside a variable\nlet response = await fetch(url, [options]);\n",[68,117,118,124],{"__ignoreMap":78},[82,119,120],{"class":84,"line":85},[82,121,123],{"class":122},"sHb24","\u002F\u002F Store fetch result inside a variable\n",[82,125,127,131,134,138,142,145,147,149,151,153,155],{"class":84,"line":126},2,[82,128,130],{"class":129},"spXry","let",[82,132,133],{"class":96}," response ",[82,135,137],{"class":136},"sXttF","=",[82,139,141],{"class":140},"sqdTv"," await",[82,143,144],{"class":88}," fetch",[82,146,93],{"class":92},[82,148,97],{"class":96},[82,150,100],{"class":92},[82,152,103],{"class":92},[82,154,106],{"class":96},[82,156,109],{"class":92},[10,158,159],{},"Now, here are a few things you need to know:",[22,161,162,168,173,179,188,191],{},[25,163,164,165,167],{},"the ",[68,166,97],{}," is where you want to access the resource from or make a request to. This could be a request to load users from a database or a request to submit details from a sign up form.",[25,169,164,170,172],{},[68,171,106],{}," is a bunch of optional parameters you can send alongside your request. For the purpose of this example, we would not be discussing that.",[25,174,175,176,178],{},"you can send a fetch request without the ",[68,177,106],{},".",[25,180,164,181,183,184],{},[68,182,89],{}," method returns a ",[185,186,187],"em",{},"promise.",[25,189,190],{},"A promise is a placeholder for a value that would be available in future.",[25,192,193,194,197,198,201],{},"And because of that, we need to wait for the result of the ",[185,195,196],{},"promise"," by using the ",[68,199,200],{},"await"," keyword.",[10,203,204,205,208],{},"A promise in JavaScript is like a promise in real life. If you do not ",[185,206,207],{},"wait"," for a promise made to you, you lose the result of the promise.",[10,210,211,212,215,216,218],{},"That’s exactly what we’re doing by ",[185,213,214],{},"awaiting"," the result of the promise returned by the ",[68,217,89],{}," method.",[10,220,221],{},"There’s a few more things to understand about promises but I’d prefer not to digress too much. Let’s focus on the main task: data fetching in a react component.",[10,223,224],{},"Write this code into this sandbox and take a look at what’s returned in the console:",[226,227,228],"blockquote",{},[10,229,230],{},"💡Write this code line by line to build some muscle memory.",[73,232,234],{"className":75,"code":233,"language":77,"meta":78,"style":78},"\u002F\u002F Write function to fetch users from server\nconst fetchUsers = async () => {\n  const response = await fetch(\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F?results=10\");\n  const data = await response.json();\n  console.log(data.results);\n};\n\n\u002F\u002F Call the function\nfetchUsers();\n",[68,235,236,241,264,287,310,333,339,346,352],{"__ignoreMap":78},[82,237,238],{"class":84,"line":85},[82,239,240],{"class":122},"\u002F\u002F Write function to fetch users from server\n",[82,242,243,246,249,252,255,258,261],{"class":84,"line":126},[82,244,245],{"class":129},"const",[82,247,248],{"class":88}," fetchUsers",[82,250,251],{"class":136}," =",[82,253,254],{"class":129}," async",[82,256,257],{"class":92}," ()",[82,259,260],{"class":129}," =>",[82,262,263],{"class":92}," {\n",[82,265,267,270,272,274,276,278,280,284],{"class":84,"line":266},3,[82,268,269],{"class":129},"  const",[82,271,133],{"class":96},[82,273,137],{"class":136},[82,275,141],{"class":140},[82,277,144],{"class":88},[82,279,93],{"class":92},[82,281,283],{"class":282},"sKHqS","\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F?results=10\"",[82,285,286],{"class":92},");\n",[82,288,290,292,295,297,299,302,304,307],{"class":84,"line":289},4,[82,291,269],{"class":129},[82,293,294],{"class":96}," data ",[82,296,137],{"class":136},[82,298,141],{"class":140},[82,300,301],{"class":96}," response",[82,303,178],{"class":92},[82,305,306],{"class":88},"json",[82,308,309],{"class":92},"();\n",[82,311,313,316,318,321,323,326,328,331],{"class":84,"line":312},5,[82,314,315],{"class":96},"  console",[82,317,178],{"class":92},[82,319,320],{"class":88},"log",[82,322,93],{"class":92},[82,324,325],{"class":96},"data",[82,327,178],{"class":92},[82,329,330],{"class":136},"results",[82,332,286],{"class":92},[82,334,336],{"class":84,"line":335},6,[82,337,338],{"class":92},"};\n",[82,340,342],{"class":84,"line":341},7,[82,343,345],{"emptyLinePlaceholder":344},true,"\n",[82,347,349],{"class":84,"line":348},8,[82,350,351],{"class":122},"\u002F\u002F Call the function\n",[82,353,355,358],{"class":84,"line":354},9,[82,356,357],{"class":88},"fetchUsers",[82,359,309],{"class":92},[10,361,362],{},"Let’s analyze this step-by-step, shall we?",[10,364,365,366,369,370,372],{},"This code simply defines an ",[68,367,368],{},"asynchronous"," function and stores it inside the ",[68,371,357],{}," variable.",[22,374,375,382],{},[25,376,377,378,381],{},"The ",[68,379,380],{},"async"," keyword is used to mark functions that are asynchronous in nature.",[25,383,384],{},"Asynchronous functions are useful when dealing with tasks that take time to complete, like fetching data over a server.",[10,386,387,388,390],{},"We have discussed above what it means to ",[68,389,200],{}," the result of the fetch call.",[10,392,393],{},"In the next line, we are taking the response from the fetch call and converting it into something that JavaScript can easily work with—-JSON.",[73,395,397],{"className":75,"code":396,"language":77,"meta":78,"style":78},"const data = await response.json();\n",[68,398,399],{"__ignoreMap":78},[82,400,401,403,405,407,409,411,413,415],{"class":84,"line":85},[82,402,245],{"class":129},[82,404,294],{"class":96},[82,406,137],{"class":136},[82,408,141],{"class":140},[82,410,301],{"class":96},[82,412,178],{"class":92},[82,414,306],{"class":88},[82,416,309],{"class":92},[10,418,419],{},"Because this operation also returns a promise, we have to await the result of the promise. If the await keyword wasn’t there, the code moves to the next line without waiting for the result of the promise.",[10,421,422],{},"If you open the console, you should see something like this:",[73,424,426],{"className":75,"code":425,"language":77,"meta":78,"style":78},"[\n  {\n    \"gender\": \"male\",\n    \"name\": { \"title\": \"Mr\", \"first\": \"John\", \"last\": \"Doe\" },\n    \"email\": \"johndoe@example.com\",\n    ...\n    \u002F\u002F other user properties\n  },\n  {\n    \"gender\": \"female\",\n    \"name\": { \"title\": \"Ms\", \"first\": \"Jane\", \"last\": \"Smith\" },\n    \"email\": \"janesmith@example.com\",\n    ...\n    \u002F\u002F other user properties\n  },\n  ...\n]\n",[68,427,428,433,438,452,493,505,510,515,520,524,536,572,584,589,594,599,605],{"__ignoreMap":78},[82,429,430],{"class":84,"line":85},[82,431,432],{"class":92},"[\n",[82,434,435],{"class":84,"line":126},[82,436,437],{"class":92},"  {\n",[82,439,440,443,446,449],{"class":84,"line":266},[82,441,442],{"class":282},"    \"gender\"",[82,444,445],{"class":92},":",[82,447,448],{"class":282}," \"male\"",[82,450,451],{"class":92},",\n",[82,453,454,457,459,462,465,467,470,472,475,477,480,482,485,487,490],{"class":84,"line":289},[82,455,456],{"class":282},"    \"name\"",[82,458,445],{"class":92},[82,460,461],{"class":92}," {",[82,463,464],{"class":282}," \"title\"",[82,466,445],{"class":92},[82,468,469],{"class":282}," \"Mr\"",[82,471,100],{"class":92},[82,473,474],{"class":282}," \"first\"",[82,476,445],{"class":92},[82,478,479],{"class":282}," \"John\"",[82,481,100],{"class":92},[82,483,484],{"class":282}," \"last\"",[82,486,445],{"class":92},[82,488,489],{"class":282}," \"Doe\"",[82,491,492],{"class":92}," },\n",[82,494,495,498,500,503],{"class":84,"line":312},[82,496,497],{"class":282},"    \"email\"",[82,499,445],{"class":92},[82,501,502],{"class":282}," \"johndoe@example.com\"",[82,504,451],{"class":92},[82,506,507],{"class":84,"line":335},[82,508,509],{"class":136},"    ...\n",[82,511,512],{"class":84,"line":341},[82,513,514],{"class":122},"    \u002F\u002F other user properties\n",[82,516,517],{"class":84,"line":348},[82,518,519],{"class":92},"  },\n",[82,521,522],{"class":84,"line":354},[82,523,437],{"class":92},[82,525,527,529,531,534],{"class":84,"line":526},10,[82,528,442],{"class":282},[82,530,445],{"class":92},[82,532,533],{"class":282}," \"female\"",[82,535,451],{"class":92},[82,537,539,541,543,545,547,549,552,554,556,558,561,563,565,567,570],{"class":84,"line":538},11,[82,540,456],{"class":282},[82,542,445],{"class":92},[82,544,461],{"class":92},[82,546,464],{"class":282},[82,548,445],{"class":92},[82,550,551],{"class":282}," \"Ms\"",[82,553,100],{"class":92},[82,555,474],{"class":282},[82,557,445],{"class":92},[82,559,560],{"class":282}," \"Jane\"",[82,562,100],{"class":92},[82,564,484],{"class":282},[82,566,445],{"class":92},[82,568,569],{"class":282}," \"Smith\"",[82,571,492],{"class":92},[82,573,575,577,579,582],{"class":84,"line":574},12,[82,576,497],{"class":282},[82,578,445],{"class":92},[82,580,581],{"class":282}," \"janesmith@example.com\"",[82,583,451],{"class":92},[82,585,587],{"class":84,"line":586},13,[82,588,509],{"class":136},[82,590,592],{"class":84,"line":591},14,[82,593,514],{"class":122},[82,595,597],{"class":84,"line":596},15,[82,598,519],{"class":92},[82,600,602],{"class":84,"line":601},16,[82,603,604],{"class":136},"  ...\n",[82,606,608],{"class":84,"line":607},17,[82,609,610],{"class":92},"]\n",[17,612,37],{"id":613},"where-do-i-fetch-data",[10,615,616],{},"Now that you know how to fetch data, the next\nthing to understand is where to fetch the data.",[10,618,619,620,623,624,627,628,631],{},"Data fetching especially from an API is not something that React is responsible for.\nReact’s core responsibilities involve state management, building the virtual DOM, rendering and re-rendering etc,\nbut not interacting with the outside world. These operations that are not part of React’s core responsibilities are called ",[185,621,622],{},"side effects",".\nThey are things that happen ",[185,625,626],{},"on the side",", not during the ",[185,629,630],{},"rendering"," process of a react component.",[10,633,634],{},"Examples of side effects",[22,636,637,640,643,646],{},[25,638,639],{},"Fetching data from an API",[25,641,642],{},"Manipulating the DOM directly",[25,644,645],{},"Updating local storage or cookies",[25,647,648],{},"Setting up timers or intervals",[57,650,652],{"id":651},"what-a-react-component-is-after","What a React component is after",[10,654,655],{},"The goal of React is to ensure that the rendering process of components remains pure.\nIn other words, it ensures that the component relies solely on its props and state to determine its output.\nIt wants to ensure that nothing comes in between the rendering process. Input must be equal to output.",[10,657,658],{},"Unfortunately, side effects are a threat to React components being pure. Why?",[10,660,661],{},"Side effects are are major threat to a component’s purity because they could modify state and make the rendering process unpredictable.\nIn other words, input may no longer be equal to output.",[57,663,665],{"id":664},"the-solution","The Solution",[10,667,668],{},"To avoid this, React provides a hook called useEffect, that allows you write any kind of side effect in your application.\nThe goal of this is to run the side effect after the rendering process remains",[10,670,671],{},"The useEffect hook allows you to synchronize a component with an external system.\nIn other words, you’re trying to do something on the outside world of React and bring it into React.",[10,673,674],{},"Here’s the syntax of the useEffect hook:",[73,676,678],{"className":75,"code":677,"language":77,"meta":78,"style":78},"useEffect(() => {}, []);\n",[68,679,680],{"__ignoreMap":78},[82,681,682,685,688,690,693],{"class":84,"line":85},[82,683,684],{"class":88},"useEffect",[82,686,687],{"class":92},"(()",[82,689,260],{"class":129},[82,691,692],{"class":92}," {},",[82,694,695],{"class":92}," []);\n",[22,697,698,701,704],{},[25,699,700],{},"() ⇒ {} represents the function that the hook should help you run",[25,702,703],{},"[] represents a dependency array. This array holds values that you referenced in the function you wrote inside the hook. They are called reactive values. Reactive values include props, state, and all the variables and functions declared directly inside your component body.",[25,705,706],{},"For now, we would be leaving the dependency array empty. If your Effect doesn’t use any reactive values, it will only run after the initial render of the component.",[10,708,709],{},"Let’s update our code with all we’ve learnt.",[73,711,713],{"className":75,"code":712,"language":77,"meta":78,"style":78},"import { useState, useEffect } from \"react\";\n\nexport default function App() {\n  const [users, setUsers] = useState([]);\n\n  useEffect(() => {\n    const fetchUsers = async () => {\n      const response = await fetch(\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F?results=10\");\n      const data = await response.json();\n      setUsers(data.results);\n    };\n\n    fetchUsers();\n  }, []);\n\n  return \u003Cdiv>\u003C\u002Fdiv>;\n}\n",[68,714,715,744,748,767,791,795,806,823,842,860,875,880,884,891,898,902,921],{"__ignoreMap":78},[82,716,717,721,724,727,729,732,735,738,741],{"class":84,"line":85},[82,718,720],{"class":719},"sYIP1","import ",[82,722,723],{"class":92},"{",[82,725,726],{"class":96}," useState",[82,728,100],{"class":92},[82,730,731],{"class":96}," useEffect",[82,733,734],{"class":92}," }",[82,736,737],{"class":129}," from",[82,739,740],{"class":282}," \"react\"",[82,742,743],{"class":92},";\n",[82,745,746],{"class":84,"line":126},[82,747,345],{"emptyLinePlaceholder":344},[82,749,750,753,756,759,762,765],{"class":84,"line":266},[82,751,752],{"class":129},"export",[82,754,755],{"class":129}," default",[82,757,758],{"class":129}," function",[82,760,761],{"class":88}," App",[82,763,764],{"class":92},"()",[82,766,263],{"class":92},[82,768,769,771,773,776,778,781,784,786,788],{"class":84,"line":289},[82,770,269],{"class":129},[82,772,103],{"class":92},[82,774,775],{"class":96},"users",[82,777,100],{"class":92},[82,779,780],{"class":96}," setUsers",[82,782,783],{"class":92},"]",[82,785,251],{"class":136},[82,787,726],{"class":88},[82,789,790],{"class":92},"([]);\n",[82,792,793],{"class":84,"line":312},[82,794,345],{"emptyLinePlaceholder":344},[82,796,797,800,802,804],{"class":84,"line":335},[82,798,799],{"class":88},"  useEffect",[82,801,687],{"class":92},[82,803,260],{"class":129},[82,805,263],{"class":92},[82,807,808,811,813,815,817,819,821],{"class":84,"line":341},[82,809,810],{"class":129},"    const",[82,812,248],{"class":88},[82,814,251],{"class":136},[82,816,254],{"class":129},[82,818,257],{"class":92},[82,820,260],{"class":129},[82,822,263],{"class":92},[82,824,825,828,830,832,834,836,838,840],{"class":84,"line":348},[82,826,827],{"class":129},"      const",[82,829,133],{"class":96},[82,831,137],{"class":136},[82,833,141],{"class":140},[82,835,144],{"class":88},[82,837,93],{"class":92},[82,839,283],{"class":282},[82,841,286],{"class":92},[82,843,844,846,848,850,852,854,856,858],{"class":84,"line":354},[82,845,827],{"class":129},[82,847,294],{"class":96},[82,849,137],{"class":136},[82,851,141],{"class":140},[82,853,301],{"class":96},[82,855,178],{"class":92},[82,857,306],{"class":88},[82,859,309],{"class":92},[82,861,862,865,867,869,871,873],{"class":84,"line":526},[82,863,864],{"class":88},"      setUsers",[82,866,93],{"class":92},[82,868,325],{"class":96},[82,870,178],{"class":92},[82,872,330],{"class":136},[82,874,286],{"class":92},[82,876,877],{"class":84,"line":538},[82,878,879],{"class":92},"    };\n",[82,881,882],{"class":84,"line":574},[82,883,345],{"emptyLinePlaceholder":344},[82,885,886,889],{"class":84,"line":586},[82,887,888],{"class":88},"    fetchUsers",[82,890,309],{"class":92},[82,892,893,896],{"class":84,"line":591},[82,894,895],{"class":92},"  },",[82,897,695],{"class":92},[82,899,900],{"class":84,"line":596},[82,901,345],{"emptyLinePlaceholder":344},[82,903,904,907,910,913,916,918],{"class":84,"line":601},[82,905,906],{"class":140},"  return",[82,908,909],{"class":92}," \u003C",[82,911,912],{"class":136},"div",[82,914,915],{"class":92},">\u003C\u002F",[82,917,912],{"class":136},[82,919,920],{"class":92},">;\n",[82,922,923],{"class":84,"line":607},[82,924,925],{"class":92},"}\n",[10,927,928],{},"We’re almost done with our code.",[10,930,931],{},"Here’s what we are doing so far:",[22,933,934,937,940,943,946],{},[25,935,936],{},"We’re fetching data from an external API.",[25,938,939],{},"Because it’s a side effect, we’re we wrote the code inside the useEffect hook.",[25,941,942],{},"The useEffect hook, makes a request to the data, and awaits the result because it’s a promise.",[25,944,945],{},"Next, we convert the response to JSON format by using the .json() method. Because this is also a promise, we await the result of the operation.",[25,947,948],{},"Next, we update our users state array with the results.",[17,950,43],{"id":951},"now-that-we-have-our-data",[10,953,954],{},"Finally, we have our data. The next step is to display the data in our JSX. Go ahead and try this yourself.",[10,956,178],{},[10,958,178],{},[10,960,178],{},[10,962,178],{},[10,964,178],{},[10,966,967],{},"If you didn’t get it, I’m sure you tried. Here’s how we can display our data in our JSX.",[73,969,971],{"className":75,"code":970,"language":77,"meta":78,"style":78},"import { useState, useEffect } from \"react\";\n\nexport default function App() {\n  const [users, setUsers] = useState([]);\n\n  useEffect(() => {\n    const fetchUsers = async () => {\n      const response = await fetch(\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F?results=10\");\n      const data = await response.json();\n      setUsers(data.results);\n    };\n\n    fetchUsers();\n  }, []);\n\n  return (\n    \u003Cdiv>\n      \u003Ch1>Random Users\u003C\u002Fh1>\n      \u003Cul>\n        {users.map((user, index) => (\n          \u003Cli key={index}>\n            \u003Cimg src={user.picture.thumbnail} alt={user.name.first} \u002F>\n            \u003Cp>{`${user.name.first} ${user.name.last}`}\u003C\u002Fp>\n            \u003Cp>{user.email}\u003C\u002Fp>\n          \u003C\u002Fli>\n        ))}\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  );\n}\n",[68,972,973,993,997,1011,1031,1035,1045,1061,1079,1097,1111,1115,1119,1125,1131,1135,1142,1152,1174,1183,1214,1235,1290,1343,1365,1375,1381,1391,1401,1407],{"__ignoreMap":78},[82,974,975,977,979,981,983,985,987,989,991],{"class":84,"line":85},[82,976,720],{"class":719},[82,978,723],{"class":92},[82,980,726],{"class":96},[82,982,100],{"class":92},[82,984,731],{"class":96},[82,986,734],{"class":92},[82,988,737],{"class":129},[82,990,740],{"class":282},[82,992,743],{"class":92},[82,994,995],{"class":84,"line":126},[82,996,345],{"emptyLinePlaceholder":344},[82,998,999,1001,1003,1005,1007,1009],{"class":84,"line":266},[82,1000,752],{"class":129},[82,1002,755],{"class":129},[82,1004,758],{"class":129},[82,1006,761],{"class":88},[82,1008,764],{"class":92},[82,1010,263],{"class":92},[82,1012,1013,1015,1017,1019,1021,1023,1025,1027,1029],{"class":84,"line":289},[82,1014,269],{"class":129},[82,1016,103],{"class":92},[82,1018,775],{"class":96},[82,1020,100],{"class":92},[82,1022,780],{"class":96},[82,1024,783],{"class":92},[82,1026,251],{"class":136},[82,1028,726],{"class":88},[82,1030,790],{"class":92},[82,1032,1033],{"class":84,"line":312},[82,1034,345],{"emptyLinePlaceholder":344},[82,1036,1037,1039,1041,1043],{"class":84,"line":335},[82,1038,799],{"class":88},[82,1040,687],{"class":92},[82,1042,260],{"class":129},[82,1044,263],{"class":92},[82,1046,1047,1049,1051,1053,1055,1057,1059],{"class":84,"line":341},[82,1048,810],{"class":129},[82,1050,248],{"class":88},[82,1052,251],{"class":136},[82,1054,254],{"class":129},[82,1056,257],{"class":92},[82,1058,260],{"class":129},[82,1060,263],{"class":92},[82,1062,1063,1065,1067,1069,1071,1073,1075,1077],{"class":84,"line":348},[82,1064,827],{"class":129},[82,1066,133],{"class":96},[82,1068,137],{"class":136},[82,1070,141],{"class":140},[82,1072,144],{"class":88},[82,1074,93],{"class":92},[82,1076,283],{"class":282},[82,1078,286],{"class":92},[82,1080,1081,1083,1085,1087,1089,1091,1093,1095],{"class":84,"line":354},[82,1082,827],{"class":129},[82,1084,294],{"class":96},[82,1086,137],{"class":136},[82,1088,141],{"class":140},[82,1090,301],{"class":96},[82,1092,178],{"class":92},[82,1094,306],{"class":88},[82,1096,309],{"class":92},[82,1098,1099,1101,1103,1105,1107,1109],{"class":84,"line":526},[82,1100,864],{"class":88},[82,1102,93],{"class":92},[82,1104,325],{"class":96},[82,1106,178],{"class":92},[82,1108,330],{"class":136},[82,1110,286],{"class":92},[82,1112,1113],{"class":84,"line":538},[82,1114,879],{"class":92},[82,1116,1117],{"class":84,"line":574},[82,1118,345],{"emptyLinePlaceholder":344},[82,1120,1121,1123],{"class":84,"line":586},[82,1122,888],{"class":88},[82,1124,309],{"class":92},[82,1126,1127,1129],{"class":84,"line":591},[82,1128,895],{"class":92},[82,1130,695],{"class":92},[82,1132,1133],{"class":84,"line":596},[82,1134,345],{"emptyLinePlaceholder":344},[82,1136,1137,1139],{"class":84,"line":601},[82,1138,906],{"class":140},[82,1140,1141],{"class":92}," (\n",[82,1143,1144,1147,1149],{"class":84,"line":607},[82,1145,1146],{"class":92},"    \u003C",[82,1148,912],{"class":136},[82,1150,1151],{"class":92},">\n",[82,1153,1155,1158,1161,1164,1167,1170,1172],{"class":84,"line":1154},18,[82,1156,1157],{"class":92},"      \u003C",[82,1159,1160],{"class":136},"h1",[82,1162,1163],{"class":92},">",[82,1165,1166],{"class":96},"Random Users",[82,1168,1169],{"class":92},"\u003C\u002F",[82,1171,1160],{"class":136},[82,1173,1151],{"class":92},[82,1175,1177,1179,1181],{"class":84,"line":1176},19,[82,1178,1157],{"class":92},[82,1180,22],{"class":136},[82,1182,1151],{"class":92},[82,1184,1186,1189,1191,1193,1196,1199,1202,1204,1207,1210,1212],{"class":84,"line":1185},20,[82,1187,1188],{"class":92},"        {",[82,1190,775],{"class":96},[82,1192,178],{"class":92},[82,1194,1195],{"class":88},"map",[82,1197,1198],{"class":92},"((",[82,1200,1201],{"class":96},"user",[82,1203,100],{"class":92},[82,1205,1206],{"class":96}," index",[82,1208,1209],{"class":92},")",[82,1211,260],{"class":129},[82,1213,1141],{"class":92},[82,1215,1217,1220,1222,1225,1227,1229,1232],{"class":84,"line":1216},21,[82,1218,1219],{"class":92},"          \u003C",[82,1221,25],{"class":136},[82,1223,1224],{"class":129}," key",[82,1226,137],{"class":136},[82,1228,723],{"class":92},[82,1230,1231],{"class":96},"index",[82,1233,1234],{"class":92},"}>\n",[82,1236,1238,1241,1244,1247,1249,1251,1253,1255,1258,1260,1263,1266,1269,1271,1273,1275,1277,1280,1282,1285,1287],{"class":84,"line":1237},22,[82,1239,1240],{"class":92},"            \u003C",[82,1242,1243],{"class":136},"img",[82,1245,1246],{"class":129}," src",[82,1248,137],{"class":136},[82,1250,723],{"class":92},[82,1252,1201],{"class":96},[82,1254,178],{"class":92},[82,1256,1257],{"class":96},"picture",[82,1259,178],{"class":92},[82,1261,1262],{"class":136},"thumbnail",[82,1264,1265],{"class":92},"}",[82,1267,1268],{"class":129}," alt",[82,1270,137],{"class":136},[82,1272,723],{"class":92},[82,1274,1201],{"class":96},[82,1276,178],{"class":92},[82,1278,1279],{"class":96},"name",[82,1281,178],{"class":92},[82,1283,1284],{"class":136},"first",[82,1286,1265],{"class":92},[82,1288,1289],{"class":92}," \u002F>\n",[82,1291,1293,1295,1297,1300,1303,1306,1308,1310,1312,1314,1316,1318,1321,1323,1325,1327,1329,1332,1334,1336,1339,1341],{"class":84,"line":1292},23,[82,1294,1240],{"class":92},[82,1296,10],{"class":136},[82,1298,1299],{"class":92},">{",[82,1301,1302],{"class":282},"`",[82,1304,1305],{"class":92},"${",[82,1307,1201],{"class":96},[82,1309,178],{"class":92},[82,1311,1279],{"class":96},[82,1313,178],{"class":92},[82,1315,1284],{"class":136},[82,1317,1265],{"class":92},[82,1319,1320],{"class":92}," ${",[82,1322,1201],{"class":96},[82,1324,178],{"class":92},[82,1326,1279],{"class":96},[82,1328,178],{"class":92},[82,1330,1331],{"class":136},"last",[82,1333,1265],{"class":92},[82,1335,1302],{"class":282},[82,1337,1338],{"class":92},"}\u003C\u002F",[82,1340,10],{"class":136},[82,1342,1151],{"class":92},[82,1344,1346,1348,1350,1352,1354,1356,1359,1361,1363],{"class":84,"line":1345},24,[82,1347,1240],{"class":92},[82,1349,10],{"class":136},[82,1351,1299],{"class":92},[82,1353,1201],{"class":96},[82,1355,178],{"class":92},[82,1357,1358],{"class":136},"email",[82,1360,1338],{"class":92},[82,1362,10],{"class":136},[82,1364,1151],{"class":92},[82,1366,1368,1371,1373],{"class":84,"line":1367},25,[82,1369,1370],{"class":92},"          \u003C\u002F",[82,1372,25],{"class":136},[82,1374,1151],{"class":92},[82,1376,1378],{"class":84,"line":1377},26,[82,1379,1380],{"class":92},"        ))}\n",[82,1382,1384,1387,1389],{"class":84,"line":1383},27,[82,1385,1386],{"class":92},"      \u003C\u002F",[82,1388,22],{"class":136},[82,1390,1151],{"class":92},[82,1392,1394,1397,1399],{"class":84,"line":1393},28,[82,1395,1396],{"class":92},"    \u003C\u002F",[82,1398,912],{"class":136},[82,1400,1151],{"class":92},[82,1402,1404],{"class":84,"line":1403},29,[82,1405,1406],{"class":92},"  );\n",[82,1408,1410],{"class":84,"line":1409},30,[82,1411,925],{"class":92},[10,1413,1414],{},"And there you have it! You have successfully learnt the basics of data fetching in a\nReact component. I hope you enjoyed the article. Kindly share the article to\nothers if you did. Till next time. Thank you!",[17,1416,1418],{"id":1417},"what-to-do-after","What to do after",[10,1420,1421],{},"Here are a few things you can try after reading this article:",[22,1423,1424,1427,1430],{},[25,1425,1426],{},"Our styling can look more beautiful. Try adding styles with CSS or your favorite library.",[25,1428,1429],{},"Try displaying the data inside a table.",[25,1431,1432],{},"Try creating an input that allows you select the amount of users to be requested.",[1434,1435,1436],"style",{},"html pre.shiki code .sRuoB, html code.shiki .sRuoB{--shiki-default:#4D699B}html pre.shiki code .soh45, html code.shiki .soh45{--shiki-default:#4E8CA2}html pre.shiki code .sE3-p, html code.shiki .sE3-p{--shiki-default:#545464}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sHb24, html code.shiki .sHb24{--shiki-default:#716E61}html pre.shiki code .spXry, html code.shiki .spXry{--shiki-default:#624C83}html pre.shiki code .sXttF, html code.shiki .sXttF{--shiki-default:#77713F}html pre.shiki code .sqdTv, html code.shiki .sqdTv{--shiki-default:#624C83;--shiki-default-font-weight:bold}html pre.shiki code .sKHqS, html code.shiki .sKHqS{--shiki-default:#6F894E}html pre.shiki code .sYIP1, html code.shiki .sYIP1{--shiki-default:#CC6D00}",{"title":78,"searchDepth":126,"depth":126,"links":1438},[1439,1440,1443,1447,1448],{"id":19,"depth":126,"text":20},{"id":52,"depth":126,"text":31,"children":1441},[1442],{"id":59,"depth":266,"text":60},{"id":613,"depth":126,"text":37,"children":1444},[1445,1446],{"id":651,"depth":266,"text":652},{"id":664,"depth":266,"text":665},{"id":951,"depth":126,"text":43},{"id":1417,"depth":126,"text":1418},"2025-01-26","A beginner's guide.",false,"md",{},"\u002Fposts\u002Fdata-fetching",{"title":5,"description":1450},"posts\u002Fdata-fetching",null,[1459,1460,1461],"react","javascript","guides","mWmj8xY3dY_Ak5zPtsFNhM8r2lV93l7eagxMH0q5n0c",[1464,1468,1472,1476,1480,1484,1488,1492,1496,1497],{"path":1465,"title":1466,"date":1467},"\u002Fposts\u002Ffunctional-options-may-not-always-form-closures","Functional options may not always form closures","2026-10-06",{"path":1469,"title":1470,"date":1471},"\u002Fposts\u002Fgo-closures-functional-options-pattern","Understanding closures in Go through the functional options pattern","2026-09-25",{"path":1473,"title":1474,"date":1475},"\u002Fposts\u002Fgoing-with-go","Going with Go","2026-09-14",{"path":1477,"title":1478,"date":1479},"\u002Fposts\u002Fcollecting-blogs","Collecting blogs","2026-09-10",{"path":1481,"title":1482,"date":1483},"\u002Fposts\u002Fhello-world","Hello, world!","2026-08-01",{"path":1485,"title":1486,"date":1487},"\u002Fposts\u002Fwhy-my-first-react-app-should-have-been-tic-tac-toe","Why my first React app should have been tic-tac-toe","2025-07-02",{"path":1489,"title":1490,"date":1491},"\u002Fposts\u002Ftyped-and-tested","Typed and tested","2025-05-29",{"path":1493,"title":1494,"date":1495},"\u002Fposts\u002Fforms-without-the-stress","Forms without the stress: React hook form does it best!","2025-03-16",{"path":1454,"title":5,"date":1449},{"path":1498,"title":1499,"date":1500},"\u002Fposts\u002F2024-in-review","2024 in review as a frontend engineer","2024-12-31",1791245350883]