Fetching Data From An Api In React Using Useeffect Hooks

By Author: jatin
Total Articles: 102
Comment this article

Learn how to use the useEffect hook in React to handle side effects like API calls and event listeners. This blog covers its syntax, examples, dependency management, and cleanup functions with MCQs for better understanding. #ReactJS #useEffect #WebDevelopment

Understanding useEffect in React – Part 1
Introduction to useEffect

React’s useEffect is one of the most powerful hooks that allows us to handle side effects in functional components. Side effects include tasks such as fetching data from an API, interacting with the browser's DOM, or subscribing to external events.

In this blog, we’ll break down useEffect step by step, using a practical example.

What is useEffect?

useEffect is a hook that lets you perform side effects in function components. It runs after the component renders and can be configured to re-run under specific conditions.

Syntax:

useEffect(() => {

// Side effect logic here

}, [dependencies]);

The first argument is a function that contains the side effect logic.
The second argument is an array of dependencies. When any ...
... dependency changes, the effect runs again.
Practical Example: Fetching User Data with useEffect

Let’s create a React component that fetches user data from an API whenever a user ID changes.

Code Implementation:

import React, { useState, useEffect } from "react";

function UserData() {

const [userId, setUserId] = useState(1);

const [user, setUser] = useState(null);

useEffect(() => {

fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)

.then((response) => response.json())

.then((data) => setUser(data));

}, [userId]);

return (

User Info

{user && (

Name: {user.name}

Email: {user.email}

Phone: {user.phone}

)}

);

}

export default UserData;

How useEffect Works in This Example

Initial Render: The component renders with userId = 1 and user = null.
API Call Triggered: useEffect runs after the first render and fetches data for user ID 1.
State Update: Once data is fetched, setUser(data) updates the user state.
Re-render: The component re-renders with the new user data, displaying the name, email, and phone.
Dependency Array ([userId]): If userId changes, useEffect runs again to fetch new data.
Key Points About useEffect

Runs after render: Unlike class components where lifecycle methods like componentDidMount are used, useEffect runs after the component renders.
Dependency Array: If left empty ([]), useEffect runs only once (on mount). If dependencies are provided, it runs whenever they change.
Cleanup Function: You can return a function from useEffect to clean up effects like event listeners.

please visit our website to know more:-https://cyberinfomines.com/blog-details/fetching-data-from-an-api-in-react-using-useeffect-hooks