Hello Guys, How are you all? Hope You all Are Fine. Today I am facing React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing in reactjs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
- How React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error Occurs ?
- How To Solve React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error ?
- Solution 1: use a self-invoking async function
- Solution 2: define a function and then call it
- Solution 3: Use fuction in this way
- Summery
How React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error Occurs ?
I am running a simple async function for API calls But I am facing the following error in my console.
useEffect: useEffect function must return a cleanup function or nothing. Promises and userEffect(async()->... but you can call an async function inside an effect.
Here is my simple async function.
useEffect(async () => {
try {
const response = await fetch(`myAPICallHere`);
const json = await response.json();
setPosts(json.data.children.map(it => it.data));
} catch (e) {
console.error(e);
}
}, []);
How To Solve React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error ?
How To Solve React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error?
To Solve React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error The problem is your code returns a promise and useEffect doesn’t expect the callback function to return Promise, rather it expects that nothing is returned or a function is returned. As a workaround for the warning, you can use a self-invoking async function. This code will solve your Issue.
React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
To Solve React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error The problem is your code returns a promise and useEffect doesn’t expect the callback function to return Promise, rather it expects that nothing is returned or a function is returned. As a workaround for the warning, you can use a self-invoking async function. This code will solve your Issue.
Solution 1: use a self-invoking async function
The problem is your code returns a promise and useEffect
doesn’t expect the callback function to return Promise, rather it expects that nothing is returned or a function is returned. As a workaround for the warning, you can use a self-invoking async function. This code will solve your Issue.
useEffect(() => {
(async function() {
try {
const response = await fetch(
`yourApiCall`
);
const json = await response.json();
setPosts(json.data.children.map(it => it.data));
} catch (e) {
console.error(e);
}
})();
}, []);
Solution 2: define a function and then call it
To make it cleaner you could define a function and then call it. the second solution will make it easier to read and will help you write code to cancel previous requests if a new one is fired or save the latest request response in state
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(
`yourApiCall`
);
const json = await response.json();
setPosts(json.data.children.map(it => it.data));
} catch (e) {
console.error(e);
}
};
fetchData();
}, []);
Solution 3: Use fuction in this way
Instead of:
React.useEffect(() => {
async function fetchData() {
}
fetchData();
}, []);
or
React.useEffect(() => {
(async function fetchData() {
})()
}, []);
you could write:
React.useEffect(() => {
void async function fetchData() {
}();
}, []);
Summery
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also Read