. Advertisement .
..3..
. Advertisement .
..4..
Using ES6, you can write code that runs in multiple browsers and on your server. But there is sometimes a warning message that you might have come across – “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing“. This article contains tips on what the warning means and how to fix it.
When Do You Get The Error “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing”?
When utilizing a basic async function for API calls, your console may report the following error.
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’s a sample of the 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);
}
}, []);
This mistake is brought on by attempting to give an async function as the first argument to the useEffect hook. An async function cannot be the initial input to the useEffect hook. You should define and call an async function outside of the function if you want to use one.
How Do You Handle With “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing” Problem?
Option 1: Utilize a self-invoking async function
The issue is that the code gets back a promise, and useEffect does not expect your callback function to give back a Promise; instead, it predicts nothing or a function. You could utilize a self-invoking async function to get around the warning. This code would then fix your problem.
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);
}
})();
}, []);
Option 2: Create a function, then invoke it.
You could create a function and thereafter call it to make things easier. The second approach will make it simpler to interpret and will assist you in writing code that will deactivate previous requests when a new one would be fired or keep the most recent 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();
}, []);
Option 3: Utilize fuction like this
Rather than:
React.useEffect(() => {
async function fetchData() {
}
fetchData();
}, []);
and
React.useEffect(() => {
(async function fetchData() {
})()
}, []);
Alternatively, you can use:
React.useEffect(() => {
void async function fetchData() {
}();
}, []);
Option 4: Then
and catch
in the useEffect callback can be still called
Because it can cause race situations, you cannot provide an async function into the useEffect as its first argument. Async operations finish in an arbitrary amount of time. Order of hooks is important. As a result, you cannot utilize async functions as the input for the useEffect hook. However, this does not stop you from using them. Then
and catch
in the useEffect callback can be still called.
For example, you can write:
import { useEffect, useState } from "react";
export default function App() {
const [data, setData] = useState({});
useEffect(() => {
fetch("https://yesno.wtf/api")
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<div className="App">
<p>{JSON.stringify(data)}</p>
</div>
);
}
In your code, promises are allowed, but if you want to utilize the function as an argument for useEffect, you can’t write it as an async function.
Conclusion
We hope you will enjoy our article about Java. With this knowledge, we know that you can fix your “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing” error quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!
Read more
→ Tips On Solving The Error: “React Hook useEffect has a missing dependency”
Leave a comment