How To Fix “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing”?
Are you having problems with the issue “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing“? How to fix it? In today’s article, I will provide solutions for you to solve the issues. Please follow the below steps to get the problem resolved now
How did “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing” occur?
React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
When you work with ReactJS, you may get the issue React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing. Don’t worry, we are here to provide you solutions in order to resolve your problem.
How to fix “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing”?
To Solve the React Hook Warnings: The useEffect function must not return Promise. This is because your code is returning a promise. UseEffect expects the callback function return Promise. It doesn’t expect that Promise is returned, but it does expect that a function or nothing is returned. You can use an async function that self-invokes to get around the warning. This code will resolve your issue.
Solution 1: Use a self-invoking Async function
Your code returns Promise. useEffect
does not expect the callback function promise Promise. It expects either nothing or a function to be returned. You can use an async function that self-invokes to get around the warning. This code will resolve 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: Create a function, then call it
You could also define a function, then call it. This will make it simpler to understand and allow you to write code to cancel requests that have been fired, or to save the most recent response to a request.
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: This is how to use fuction
Instead of:
React.useEffect(() => {
async function fetchData() {
}
fetchData();
}, []);
Or
React.useEffect(() => {
(async function fetchData() {
})()
}, []);
You could also write:
React.useEffect(() => {
void async function fetchData() {
}();
}, []);
Final words
The above are useful solutions that can help you fix “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing” problem, if you can’t solve it well. Please leave a message.