DekGenius.com
JAVASCRIPT
react useeffect async
const MyFunctionnalComponent: React.FC = props => {
useEffect(() => {
// Using an IIFE
(async function anyNameFunction() {
await loadContent();
})();
}, []);
return <div></div>;
};
async in useeffect
useEffect(() => {
(async () => {
const products = await api.index()
setFilteredProducts(products)
setProducts(products)
})()
}, [])
async useeffect
const [users, setUsers] = useState([]);
useffect(() => {
const getUsers = async () => {
let response = await fetch('/users');
let data = await response.json();
setUsers(data);
};
getUsers();
}, []);
how to use async await inside useeffect
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(
`https://www.reddit.com/r/${subreddit}.json`
);
const json = await response.json();
setPosts(json.data.children.map(it => it.data));
} catch (e) {
console.error(e);
}
};
fetchData();
}, []);
Using async in UseEffect
useEffect(() => {
const getUsers = async () => {
const users = await fetchUsers();
setUsers(users);
};
getUsers(); // run it, run it
return () => {
// this now gets called when the component unmounts
};
}, []);
async in useeffect
function myApp() {
const [data, setdata] = useState()
useEffect(() => {
async function fetchMyAPI() {
const response = await fetch('api/data')
response = await response.json()
setdata(response)
}
fetchMyAPI()
}, [])
}
useeffect async await
const getUsers = async () => {
const users = await axios.get('https://randomuser.me/api/?page=1&results=10&nat=us');
setUsers(users.data.results);
};
useEffect(() => {
getUsers();
}, []);
async useeffect
useEffect(() => {
(async function anyNameFunction() {await loadContent();})();
}, []);
using async function in useEffect
function Example() {
const [data, dataSet] = useState<any>(null)
useEffect(() => {
async function fetchMyAPI() {
let response = await fetch('api/data')
response = await response.json()
dataSet(response)
}
fetchMyAPI()
}, [])
return <div>{JSON.stringify(data)}</div>
}
async useEffect
function OutsideUsageExample() {
const [data, dataSet] = useState<any>(null)
const fetchMyAPI = useCallback(async () => {
let response = await fetch('api/data')
response = await response.json()
dataSet(response)
}, [])
useEffect(() => {
fetchMyAPI()
}, [fetchMyAPI])
return (
<div>
<div>data: {JSON.stringify(data)}</div>
<div>
<button onClick={fetchMyAPI}>manual fetch</button>
</div>
</div>
)
}
Using useEffect with async
useFocusEffect(
useCallback(() => {
let dbRef;
let didCleanup = false;
(async() => {
try {
const user = JSON.parse(await AsyncStorage.getItem("user"));
if (!didCleanup && user.uid) {
dbRef = ref(dbDatabase, "/activity/" + user.uid);
onValue(query(dbRef, limitToLast(20)), (snapshot) => {
console.log(snapshot.val());
});
}
} catch (error) {
// ...handle/report the error...
}
})();
return () => {
didCleanup = true;
if (dbRef) {
off(dbRef);
}
};
}, [])
);
© 2022 Copyright:
DekGenius.com