In this article, we will learn how to load and show data into the ReactJS application from any API using, useEffect() hook. Let’s create an example will read data from API and display it over the webpage in ReactJS
What is useEffect() hook in RectJS?
React gives us many kinds of functionalities and methods that helps to build a web application conveniently. useEffect() is one of them. Whenever we want to load or show data that is outside of the currently running application that the DOM is using, we’ll use useEffect(). In short, useEffect() will be used whenever there are some data that are loading from outside which is a side effect of the application.
Analyzing useEffect()
- Importing
useEffect()from'react'comes first.
import React, { useEffect } from "react";
useEffect(()=>{
// inside of this callback function the data will be rendering
},[])
Load data from an API
- Open the functional component
// src/App.js
import React from "react";
function App() {
return (
<div className="App">
</div>
);
}
export default App;
- Import
useEffect()hook and use this inside the component function
Note: Do not use nay hooks inside any function other than the function that comes with the component itself.
// src/App.js
import React, { useEffect } from "react";
function App() {
useEffect(() => {
// inside of this callback function the data will be rendering
}, [])
return (
<div className="App">
</div>
);
}
export default App;
- Fetch data from an API (we will be using a fake API here)
// src/App.js
import React, { useEffect, useState } from "react";
function App() {
// using state hook to store the data that are coming from the API
const [user, setUser] = useState([]);
useEffect(() => {
// fetch data from the API
fetch('https://jsonplaceholder.typicode.com/users')
// it will give a response and change it to a json file
.then(res => res.json())
// store the json data to a state hook
.then(data => setUser(data));
// dependency array is empty because we want to load the data just once
}, [])
return (
<div className="App">
</div>
);
}
export default App;
To check whether the data came or not, console.log the user state and open dev tool.
console.log(user)
Print data in webpage
To show the data that are coming from the API,
- Use JSX expression and map to get each object from the array the API is returning.
// src/App.js
import React, { useEffect, useState } from "react";
function App() {
// using state hook to store the data that are coming from the API
const [user, setUser] = useState([]);
console.log(user)
useEffect(() => {
// fetch data from the API
fetch('https://jsonplaceholder.typicode.com/users')
// it will give a response and change it to a json file
.then(res => res.json())
// store the json data to a state hook
.then(data => setUser(data));
// dependency array is empty because we want to load the data just once
}, [])
return (
<div className="App bg-orange-100">
{
user.map(param =>
<li className="list-none text-2xl text-center"><span className="text-orange-400">User Name:</span> {param.name}</li>
)
}
</div>
);
}
export default App;
Note: We are using Tailwind CSS component library for styling. To know more about this, Read This Article.
