{"id":11782,"date":"2022-06-29T18:36:00","date_gmt":"2022-06-29T15:36:00","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=11782"},"modified":"2022-11-14T00:56:08","modified_gmt":"2022-11-13T21:56:08","slug":"react-fetch-data-guide","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/","title":{"rendered":"React Application Fetch Data [Guide]"},"content":{"rendered":"<p>Fetch data is a basic requirement of practically every <strong><a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">React<\/a> application<\/strong>. There are a variety of ways to fetch data in React, including the built-in Fetch API, Axios, async\/await syntax, and others. We&#8217;ll look at some of these methods in detail.<\/p><p><a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/01\/Top-JS-Art-jan-600x450.png\"  data-excerpt=\"On the last day of January let&#039;s recap all the noteworthy articles of the outgoing month. In this post, you can find information about React components, developer tools, JS methods, CSS libraries, and many more. Mixing React modules into a legacy application by ItNext Read the article Legacy Code and Chesterson\u2019s Fence by CodeBurst Read&hellip;\" href=\"https:\/\/flatlogic.com\/blog\/15-articles-of-january-to-learn-javascript\/\">React components<\/a> can simply fetch their data. There are several options where to fetch the data:<\/p><ul class=\"wp-block-list\"><li>Who is interested in this data? The<strong> data-fetching component <\/strong>should be the shared parent component for all of the components.<\/li><li>Where exactly do you want to display a load indicator (e.g. load spinner, progress indicator) when data is expected from an asynchronous request? The load indicator can be mapped to the common parent component from the first criterion. Then the common parent component will still be the data-fetching component.<ul><li>When the loading indicator should be displayed in a higher-level component, the data fetching needs to be transferred to this component.<\/li><li>When a load indicator needs to be displayed in the<strong> child components<\/strong> of the common parent component, not necessarily in those components that need the data, the common parent component becomes the component to fetch the data as well. The status of the load indicator can then be transferred to all the child components that are concerned with displaying the load indicator.<\/li><\/ul><\/li><li>Where is the optional error message you want to show if the request fails? The same rules from the second criterion for the load indicator apply here.<\/li><\/ul><p>Is all about where the data should be fetched in <strong>the React component architecture<\/strong>. However, when data should be fetched and how should it be fetched once the generic parent component has been matched? Let&#8217;s look at some ways <strong>to retrieve data using React<\/strong>.<\/p><figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"683\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/11\/tudor-baciu-vc3iVL_znJ8-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-12528 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/11\/tudor-baciu-vc3iVL_znJ8-unsplash-1024x683.jpg 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/11\/tudor-baciu-vc3iVL_znJ8-unsplash-600x400.jpg 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/11\/tudor-baciu-vc3iVL_znJ8-unsplash-768x512.jpg 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/11\/tudor-baciu-vc3iVL_znJ8-unsplash-1536x1024.jpg 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/11\/tudor-baciu-vc3iVL_znJ8-unsplash-2048x1365.jpg 2048w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/683;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>In most modern browsers, the Fetch API is a tool that is built into the window object (<code>window. fetch<\/code>) and allows to make <code>HTTP<\/code> requests very simply by using JavaScript promises.<\/p><h2 class=\"wp-block-heading\">Using a React Hooks&nbsp;<\/h2><h3 class=\"wp-block-heading\">Axios&nbsp;<\/h3><p>Axios is a client-side HTTP library based on promises. It facilitates sending asynchronous <code>HTTP<\/code> requests to REST endpoints and helps perform <a href='https:\/\/flatlogic.com\/crud-app'>CRUD<\/a> operations. That REST API\/endpoint is an external API like Google API or GitHub API, or it can be your<strong> backend Node.js server<\/strong>. <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><\/p><p>This article is about a React application, so we&#8217;ll use React hooks to access states and other functions. The hooks we&#8217;ll be using are <code>useEffect()<\/code> and <code>useState()<\/code>. Essentially in this case it&#8217;ll be the <code>useEffect()<\/code> hook to fetch posts after the app renders\/mounts, while the <code>useState()<\/code> hook will help create local storage for our data. First, you need to install axios by <code>npm install axios<\/code>.<\/p><ul class=\"wp-block-list\"><li><strong>Making <code>GET<\/code> Requests with Axios in React. <\/strong><code>GET<\/code> requests are used to retrieve data from an endpoint, and this happens right after the application is rendered due to the <code>useEffect()<\/code> hook. First, it will be using a variable and then the <code>.get()<\/code> method will be connected to make a <code>GET<\/code> request to the endpoint\/API. Then the <code>.then()<\/code> callback is used to get all the response data, as there is already an Axios instance that stores the base URL assigned to the variable (client).<\/li><\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"269\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image4-1024x269.png\" alt=\"axios get\" class=\"wp-image-11901 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image4-1024x269.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image4-600x158.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image4-768x202.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image4-1536x404.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image4.png 1568w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/269;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\"><li><strong>Consuming<\/strong> <strong><code>GET<\/code> Request. <\/strong>When the <code>GET<\/code> request has been successfully implemented, the next step is to consume data stored in the post-state.<\/li><li><strong>Making <code>POST<\/code> Request with Axios in React. <\/strong>The <code>POST<\/code> request is used to send data to an endpoint and works similarly to a <code>GET<\/code> request, except with the function generated to perform this task, running when the form is otherwise or submitted. It will be using a <code>.post()<\/code> method. The function accepts an object to send data to and adds data to the state, removing previous data and adding new data.<\/li><\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"193\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image3-1024x193.png\" alt=\"axios post\" class=\"wp-image-11900 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image3-1024x193.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image3-600x113.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image3-768x145.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image3-1536x290.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image3.png 1780w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/193;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\"><li><strong>Making <code>DELETE<\/code> Request. <\/strong><code>DELETE<\/code> request is used to delete certain data from both the endpoint\/API and the user interface. It will be using a <code>.delete()<\/code> method.<\/li><\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"159\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image1-1024x159.png\" alt=\"axios delete\" class=\"wp-image-11897 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image1-1024x159.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image1-600x93.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image1-768x119.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image1-1536x239.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image1.png 1774w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/159;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Overall, Axios is about improving quality of life, not anything else. But making lots of small, step-by-step changes to the quality of life workflow can significantly improve the quality and speed of development.<\/p><h3 class=\"wp-block-heading\"><code>async\/await<\/code> syntax<\/h3><p>ECMAScript 2017 introduced the ability to use promises using async \/ await syntax. The advantage of this is that it allows removing <code>.then()<\/code>, <code>.catch()<\/code> and <code>.finally()<\/code> callbacks and simply getting asynchronously resolved data back as if there was writing synchronous code with no promises at all. In other words, there is no need to rely on callbacks when using async \/ await in React. Remember when using <code>useEffect<\/code> that the effect function cannot be made asynchronous.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"238\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image5-1024x238.png\" alt=\"async\/await\" class=\"wp-image-11902 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image5-1024x238.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image5-600x139.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image5-768x179.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image5-1536x357.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image5.png 1764w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/238;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">useFetch<\/h3><p>Writing the <code>useEffect<\/code> hook with all its templates in each component you want to fetch data in is time-consuming eventually. For reducing code reuse, you can use a custom hook as a special abstraction, which you can write yourself from a third-party library <em>(using the react-fetch-hook library)<\/em>. Running a custom hook on <code>HTTP<\/code> requests allows for making the components more concise. The only thing you need to do is to call the hook at the top of the component.<\/p><p>The load and error state should thus be able to use the same structure for this component as before when all data is returned but without <code>useEffect<\/code>. The code no longer needs to be used to resolve the promise from the <code>GET<\/code> request every time the request has to be executed.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image2.png\" alt=\"useFetch\" class=\"wp-image-11899 lazyload\" width=\"495\" height=\"381\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image2.png 990w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image2-600x462.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/image2-768x591.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 495px; --smush-placeholder-aspect-ratio: 495\/381;\" data-original-sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">React-Query<\/h3><p>The React-Query library allows handling the data implied in web service requests and maintaining applications while improving user experience. First, you need to import React, <code>useQuery<\/code> hook, and the <code>axios<\/code> libraries. Next, define an asynchronous function. And create a functional React component.<\/p><p>The difference between React-Query and the common data fetching library <code>useEffect<\/code> is that React-Query will return previously fetched data first and then re-fetch it again. Whereas <code>useEffect<\/code> fetches the data independently of the changed data and reloads the page.&nbsp;&nbsp;<\/p><h2 class=\"wp-block-heading\">Conclusion<\/h2><p>React is a great tool for building rich and high-scalable user interfaces. Some of its powerful features are the ability to fetch data and interact with it externally for a web application. There are many ways to consume the REST API in a<a href=\"https:\/\/flatlogic.com\/documentation\/create-react-app\"> <strong>React application<\/strong><\/a>, but in this guide, we&#8217;ve discussed how you can consume it using some of the most popular methods, such as Axios (a promise-based HTTP client), <code>useEffect<\/code> and <code>useFetch<\/code> hooks, React-Query Library, etc.<\/p>","protected":false},"excerpt":{"rendered":"<p>This article will guide you on how to fetch data in React with different approaches<\/p>\n","protected":false},"author":24,"featured_media":11869,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"Guide to fetching data in React with Fetch API, Axios, hooks, and React Query\nFetch in a shared parent to manage loading and error across children\nExamples for Axios GET\/POST\/DELETE with useEffect\/useState\nExplains async\/await patterns; useEffect callbacks can\u00e2\u20ac\u2122t be async\nCovers custom hooks (useFetch) and React Query for caching\/refetch","flatlogic_facts":[{"text":"Most modern browsers expose the Fetch API as window.fetch for promise-based HTTP requests.","source":""},{"text":"In React, the useEffect effect function cannot be async; call an async function inside it.","source":""},{"text":"This guide shows GET, POST, and DELETE requests with Axios in React, installed via: npm install axios.","source":""},{"text":"React Query returns previously fetched data first and then re-fetches it.","source":""},{"text":"Fetch data in the shared parent component to centralize loading and error UI for child components.","source":""}],"footnotes":""},"categories":[127],"tags":[101,54,124,35],"class_list":["post-11782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-api","tag-javascript","tag-next-js","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Application Fetch Data [Guide] - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"This article will guide you on how to fetch data in React apps with different approaches. Let&#039;s look at some ways to retrieve data using it!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Application Fetch Data [Guide]\" \/>\n<meta property=\"og:description\" content=\"This article will guide you on how to fetch data in React apps with different approaches. Let&#039;s look at some ways to retrieve data using it!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-29T15:36:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-13T21:56:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/Post-Dark-9.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alesia S.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alesia S.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Application Fetch Data [Guide] - Flatlogic Blog","description":"This article will guide you on how to fetch data in React apps with different approaches. Let's look at some ways to retrieve data using it!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/","og_locale":"en_US","og_type":"article","og_title":"React Application Fetch Data [Guide]","og_description":"This article will guide you on how to fetch data in React apps with different approaches. Let's look at some ways to retrieve data using it!","og_url":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2022-06-29T15:36:00+00:00","article_modified_time":"2022-11-13T21:56:08+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/Post-Dark-9.png","type":"image\/png"}],"author":"Alesia S.","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alesia S.","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/"},"author":{"name":"Alesia S.","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9"},"headline":"React Application Fetch Data [Guide]","datePublished":"2022-06-29T15:36:00+00:00","dateModified":"2022-11-13T21:56:08+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/"},"wordCount":1002,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/Post-Dark-9.png","keywords":["Api","Javascript","Next.js","React"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/","url":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/","name":"React Application Fetch Data [Guide] - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/Post-Dark-9.png","datePublished":"2022-06-29T15:36:00+00:00","dateModified":"2022-11-13T21:56:08+00:00","description":"This article will guide you on how to fetch data in React apps with different approaches. Let's look at some ways to retrieve data using it!","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/Post-Dark-9.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/06\/Post-Dark-9.png","width":1080,"height":1080,"caption":"react fetch data guide"},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/react-fetch-data-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Application Fetch Data [Guide]"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9","name":"Alesia S.","url":"https:\/\/flatlogic.com\/blog\/author\/alesya\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/11782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=11782"}],"version-history":[{"count":7,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/11782\/revisions"}],"predecessor-version":[{"id":12529,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/11782\/revisions\/12529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/11869"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=11782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=11782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=11782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}