fetch with useEffect hook
import React, { useEffect, useState } from 'react';
const User = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
getUsers();
}, []);
async function getUsers() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
setUsers(users);
}
return (
<ul>
{users.map(user => (
<li>{user.name}</li>
))}
</ul>
);
};
export default User;DATA FETCHING IN EFFECT HOOK
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
let didCancel = false;
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
const result = await axios(url);
if (!didCancel) {
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
}
} catch (error) {
if (!didCancel) {
dispatch({ type: 'FETCH_FAILURE' });
}
}
};
fetchData();
return () => {
didCancel = true;
};
}, [url]);
return [state, setUrl];
};how to fetch data with useEffect
useEffect(() => {
const fetchData = async () => {
const result = await fetch(
'https://my-api.com',
);
setState(result);
};
fetchData();
}, []);How to fetch data from an api useEffect
import {useEffect} from "react";
useEffect(() => {
fetchData();
}, []);Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
