In modern web development, performance and user experience are of paramount importance. As applications become more complex, loading all components upfront can lead to slower initial load times and decreased responsiveness. To address this, async components have emerged as a powerful technique to improve performance by loading components asynchronously. In this article, we will explore what async components are and how they can benefit your web applications.
React Async is a module that is extensively used for fetching data from the backend. React Async’s metal model is component first. By using it we can perform data loading at the component level itself. Such a component is called an async component.
Prerequisite: Introduction and installation ReactJS
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it using the following command.
cd project
Step 3: now install the dependency react-async by using the following command:
npm i react-async
Project Structure: It will look like this:
Example: In this example, we are firstly creating a component named Image, where we are importing useFetch hook ‘react-async’. further, we are fetching data and errors from the API https://dog.ceo/api/breeds/image/random, which shows random images of dogs through the useFetch hook. The hook takes the destination i,e the resource link, and then is followed by the header.
Now the API provides messages and statuses like this,
{
“message”: “https://images.dog.ceo/breeds/terrier-australian/n02096294_2688.jpg”,
“status”: “success”
}
Now if we receive an error it will show the error message or else the data.message which is the hyperlink of the image will be stored in a variable name imgSrc, further, we are passing it to the image tag to render.
App.js
Javascript
import { useFetch } from "react-async";const Image = () => { var imgSrc = ""; const { data, error } = useFetch( `https://dog.ceo/api/breeds/image/random`, { headers: { accept: "application/json" }, }); if (error) return error.message; if (data) imgSrc = data.message; return ( <> <img src={imgSrc} /> </> );};function App() { return ( <div className="App"> <h1>Image using the Dog API</h1> <Image /> </div> );}export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Go to your browser and open http://localhost:3000/, a picture of a dog with the heading “Image using the Dog API” will appear.
Reference: https://docs.react-async.com/
