{"id":293491,"date":"2019-07-31T16:03:58","date_gmt":"2019-07-31T23:03:58","guid":{"rendered":"https:\/\/css-tricks.com\/?p=293491"},"modified":"2019-07-31T16:03:58","modified_gmt":"2019-07-31T23:03:58","slug":"fetching-data-in-react-using-react-async","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fetching-data-in-react-using-react-async\/","title":{"rendered":"Fetching Data in React using React Async"},"content":{"rendered":"<p>You\u2019re probably used to <a href=\"https:\/\/css-tricks.com\/using-data-in-react-with-the-fetch-api-and-axios\/\">fetching data<\/a> in React using axios or fetch. The usual method of handling data fetching is to:<\/p>\n<ul>\n<li>Make the API call.<\/li>\n<li>Update state using the response if all goes as planned.<\/li>\n<li>Or, in cases where errors are encountered, an error message is displayed to the user.<\/li>\n<\/ul>\n<p>There will always be delays when handling requests over the network. That\u2019s just part of the deal when it comes to making a request and waiting for a response. That\u2019s why we often make use of a loading spinner to show the user that the expected response is loading.<\/p>\n<p class=\"codepen\" data-height=\"225\" style=\"height: 225px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"geoffgraham\" data-slug-hash=\"ojRMaN\" style=\"height: 225px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"ojRMaN\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/geoffgraham\/pen\/ojRMaN\/\" rel=\"noopener\"><br \/>\n  ojRMaN<\/a> by Geoff Graham (<a href=\"https:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>All these can be done using a library called <a href=\"https:\/\/github.com\/ghengeveld\/react-async\" rel=\"noopener\">React Async<\/a>.<\/p>\n<p>React Async is a promised-based library that makes it possible for you to fetch data in your React application. Let\u2019s look at various examples using components, hooks and helpers to see how we can implement loading states when making requests.<\/p>\n<p>For this tutorial, we will be making use of <a href=\"https:\/\/github.com\/facebook\/create-react-app\" rel=\"noopener\">Create React App<\/a>. You can create a project by running:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">npx create-react-app react-async-demo<\/code><\/pre>\n<p>When that is done, run the command to install React Async in your project, using yarn or npm:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">## yarn\r\nyarn add react-async\r\n\r\n## npm\r\nnpm install react-async --save<\/code><\/pre>\n<h3>Example 1: Loaders in components<\/h3>\n<p>The library allows us to make use of <code>&lt;Async&gt;<\/code> directly in our <abbr>JSX<\/abbr>. As such, the component example will look like this;<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ Let's import React, our styles and React Async\r\nimport React from 'react';\r\nimport '.\/App.css';\r\nimport Async from 'react-async';\r\n\r\n\/\/ We'll request user data from this API\r\nconst loadUsers = () =&gt;\r\n  fetch(\"https:\/\/jsonplaceholder.typicode.com\/users\")\r\n    .then(res =&gt; (res.ok ? res : Promise.reject(res)))\r\n    .then(res =&gt; res.json())\r\n\r\n\/\/ Our component\r\nfunction App() {\r\n  return (\r\n    &lt;div className=\"container\"&gt;\r\n      &lt;Async promiseFn={loadUsers}&gt;\r\n        {({ data, err, isLoading }) =&gt; {\r\n          if (isLoading) return \"Loading...\"\r\n          if (err) return `Something went wrong: ${err.message}`\r\n\r\n          if (data)\r\n            return (\r\n              &lt;div&gt;\r\n                &lt;div&gt;\r\n                  &lt;h2&gt;React Async - Random Users&lt;\/h2&gt;\r\n                &lt;\/div&gt;\r\n                {data.map(user=&gt; (\r\n                  &lt;div key={user.username} className=\"row\"&gt;\r\n                    &lt;div className=\"col-md-12\"&gt;\r\n                      &lt;p&gt;{user.name}&lt;\/p&gt;\r\n                      &lt;p&gt;{user.email}&lt;\/p&gt;\r\n                    &lt;\/div&gt;\r\n                  &lt;\/div&gt;\r\n                ))}\r\n              &lt;\/div&gt;\r\n            )\r\n        }}\r\n      &lt;\/Async&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<p>First, we created a function called <code>loadUsers<\/code>. This will make the API call using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\" rel=\"noopener\">fetch API<\/a>. And, when it does, it returns a promise which gets resolved. After that, the needed props are made available to the component.<\/p>\n<p>The props are:<\/p>\n<ul>\n<li><code>isLoading<\/code>: This handles cases where the response has not be received from the server yet.<\/li>\n<li><code>err<\/code>: For cases when an error is encountered. You can also rename this to <code>error<\/code>.<\/li>\n<li><code>data<\/code>: This is the expected data obtained from the server.<\/li>\n<\/ul>\n<p>As you can see from the example, we return something to be displayed to the user dependent on the prop.<\/p>\n<h3>Example 2: Loaders in hooks<\/h3>\n<p>If you are a fan of hooks (<a href=\"https:\/\/css-tricks.com\/intro-to-react-hooks\/\">as you should<\/a>), there is a hook option available when working with React Async. Here\u2019s how that looks:<\/p>\n<pre rel=\"JavaScript\" data-line=\"14\"><code class=\"language-javascript\">\/\/ Let's import React, our styles and React Async\r\nimport React from 'react';\r\nimport '.\/App.css';\r\nimport { useAsync } from 'react-async';\r\n\r\n\/\/ Then we'll fetch user data from this API\r\nconst loadUsers = async () =&gt;\r\n  await fetch(\"https:\/\/jsonplaceholder.typicode.com\/users\")\r\n    .then(res =&gt; (res.ok ? res : Promise.reject(res)))\r\n    .then(res =&gt; res.json())\r\n\r\n\/\/ Our component\r\nfunction App() {\r\n  const { data, error, isLoading } = useAsync({ promiseFn: loadUsers })\r\n  if (isLoading) return \"Loading...\"\r\n  if (error) return `Something went wrong: ${error.message}`\r\n  if (data)\r\n  \r\n  \/\/ The rendered component\r\n  return (\r\n    &lt;div className=\"container\"&gt;\r\n      &lt;div&gt;\r\n        &lt;h2&gt;React Async - Random Users&lt;\/h2&gt;\r\n      &lt;\/div&gt;\r\n      {data.map(user=&gt; (\r\n        &lt;div key={user.username} className=\"row\"&gt;\r\n          &lt;div className=\"col-md-12\"&gt;\r\n            &lt;p&gt;{user.name}&lt;\/p&gt;\r\n            &lt;p&gt;{user.email}&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      ))}\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<p>This looks similar to the component example, but in this scenario, we\u2019re making use of <code>useAsync<\/code> and not the <code>Async<\/code> component. The response returns a promise which gets resolved, and we also have access to similar props like we did in the last example, with which we can then return to the rendered UI.<\/p>\n<h3>Example 3: Loaders in helpers<\/h3>\n<p>Helper components come in handy in making our code clear and readable. These helpers can be used when working with an <code>useAsync<\/code> hook or with an <code>Async<\/code> component, both of which we just looked at. Here is an example of using the helpers with the <code>Async<\/code> component.<\/p>\n<pre rel=\"JavaScript\" data-line=\"16,17,18,36,37\"><code class=\"language-javascript\">\/\/ Let's import React, our styles and React Async\r\nimport React from 'react';\r\nimport '.\/App.css';\r\nimport Async from 'react-async';\r\n\r\n\/\/ This is the API we'll use to request user data\r\nconst loadUsers = () =&gt;\r\n  fetch(\"https:\/\/jsonplaceholder.typicode.com\/users\")\r\n    .then(res =&gt; (res.ok ? res : Promise.reject(res)))\r\n    .then(res =&gt; res.json())\r\n\r\n\/\/ Our App component\r\nfunction App() {\r\n  return (\r\n    &lt;div className=\"container\"&gt;\r\n      &lt;Async promiseFn={loadUsers}&gt;\r\n          &lt;Async.Loading&gt;Loading...&lt;\/Async.Loading&gt;\r\n          &lt;Async.Fulfilled&gt;\r\n            {data =&gt; {\r\n              return (\r\n                &lt;div&gt;\r\n                  &lt;div&gt;\r\n                    &lt;h2&gt;React Async - Random Users&lt;\/h2&gt;\r\n                  &lt;\/div&gt;\r\n                  {data.map(user=&gt; (\r\n                    &lt;div key={user.username} className=\"row\"&gt;\r\n                      &lt;div className=\"col-md-12\"&gt;\r\n                        &lt;p&gt;{user.name}&lt;\/p&gt;\r\n                        &lt;p&gt;{user.email}&lt;\/p&gt;\r\n                      &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                  ))}\r\n                &lt;\/div&gt;\r\n              )\r\n            }}\r\n          &lt;\/Async.Fulfilled&gt;\r\n          &lt;Async.Rejected&gt;\r\n            {error =&gt; `Something went wrong: ${error.message}`}\r\n          &lt;\/Async.Rejected&gt;\r\n      &lt;\/Async&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<p>This looks similar to when we were making use of props. With that done, you could break the different section of the app into tiny components.<\/p>\n<h3>Conclusion<\/h3>\n<p>If you have been growing weary of going the route I mentioned in the opening section of this tutorial, you can start making of React Async in that project you are working on. The source code used in this tutorial can be found in their different branches on <a href=\"https:\/\/github.com\/kinsomicrote\/react-async-demo\" rel=\"noopener\">GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019re probably used to fetching data in React using axios or fetch. The usual method of handling data fetching is to: Make the API call. Update state using the response if all goes as planned. Or, in cases where errors are encountered, an error message is displayed to the user. There will always be delays [&hellip;]<\/p>\n","protected":false},"author":251966,"featured_media":293497,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[667,1322,557],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":274506,"url":"https:\/\/css-tricks.com\/using-data-in-react-with-the-fetch-api-and-axios\/","url_meta":{"origin":293491,"position":0},"title":"Using data in React with the Fetch API and axios","date":"August 3, 2018","format":false,"excerpt":"If you are new to React, and perhaps have only played with building to-do and counter apps, you may not yet have run across a need to pull in data for your app. There will likely come a time when you\u2019ll need to do this, as React apps are most\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/dog-fetch.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281985,"url":"https:\/\/css-tricks.com\/reacts-experimental-suspense-api-will-rock-for-fallback-ui-during-data-fetches\/","url_meta":{"origin":293491,"position":1},"title":"React&#8217;s Experimental Suspense API Will Rock for Fallback UI During Data Fetches","date":"February 2, 2019","format":false,"excerpt":"Most web applications built today receive data from an API. When fetching that data, we have to take certain situations into consideration where the data might not have been received. Perhaps it was a lost connection. Maybe it was the endpoint was changed. Who knows. Whatever the issue, it's the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/Untitled_Artwork.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255833,"url":"https:\/\/css-tricks.com\/server-side-react-rendering\/","url_meta":{"origin":293491,"position":2},"title":"Server-Side React Rendering","date":"June 22, 2017","format":false,"excerpt":"React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React server-side? Suppose you've built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278134,"url":"https:\/\/css-tricks.com\/a-guide-to-custom-elements-for-react-developers\/","url_meta":{"origin":293491,"position":3},"title":"A Guide to Custom Elements for React Developers","date":"November 8, 2018","format":false,"excerpt":"I had to build a UI recently and (for the first time in a long while) I didn't have the option of using React.js, which is my preferred solution for UI these days. So, I looked at what the built-in browser APIs had to offer and saw that using custom\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/web-components-react.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":293508,"url":"https:\/\/css-tricks.com\/run-useeffect-only-once\/","url_meta":{"origin":293491,"position":4},"title":"Run useEffect Only Once","date":"July 30, 2019","format":false,"excerpt":"React has a built-in hook called useEffect. Hooks are used in function components. The Class component comparison to useEffect are the methods componentDidMount, componentDidUpdate, and componentWillUnmount. useEffect will run when the component renders, which might be more times than you think. I feel like I've had this come up a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278949,"url":"https:\/\/css-tricks.com\/front-end-developers-have-to-manage-the-loading-experience\/","url_meta":{"origin":293491,"position":5},"title":"Front-End Developers Have to Manage the Loading Experience","date":"November 28, 2018","format":false,"excerpt":"Web performance is a huge complicated topic. There are metrics like total requests, page weight, time to glass, time to interactive, first input delay, etc. There are things to think about like asynchronous requests, render blocking, and priority downloading. We often talk about performance budgets and performance culture. How that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/kid-slide-playground.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293491"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/251966"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=293491"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293491\/revisions"}],"predecessor-version":[{"id":293496,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293491\/revisions\/293496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/293497"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=293491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=293491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=293491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}