From: https://wareboss.com/react-hook-async-function-in-useeffect/
If you already know the error message:
"React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing"
Here is a little explanation of why this occurs and how to solve them.
This issues occurs when you directly call a Promise from useEffect Hook.
export default function Example() {
const [data, setData] = useState(false)
useEffect(async () => {
let response = await fetch('api/data') //Direct call
response = await res.json()
setData(response)
}, []);
return <div>{data}</div>;
}
The useEffect hook expcect to receive a function to cancel or release resources.
To solve this issue you need to call a Syncronous method. Event if this new one are Async.
export default function Example() {
const [data, setData] = useState(false)
useEffect(() => {
const runAsync = async () => {
let response = await fetch('api/data')
response = await res.json()
setData(response)
};
runAsync();
}, []);
return <div>{data}</div>;
}
You can cancel this fetch when the component get destroyed, but this is another article (React Hook – Clean Up useEffect).
Bye!
Top comments (7)
Hi Igore,
This looks like a good post here. Can you share this in full on DEV, instead of linking to it?
The SEO could also be taken care of via
canonical_urlfrontmatter, which you can find more in the Editor Guide.DEV generally asks that folks share their posts in full if possible and there is tooling provided (dev.to/settings/publishing-from-rss) to make it so that it's relatively easy to repost from outside blogs.
Hope you'll consider sharing the full post going forward.
Hi Sung,
Thank you by your recommendations.
I'll read more about how to do this and i'll work to publish full articles okay? (I'm new on this platform, i see another article doing exactly the same..)
Thank you!
Bye bye!
Sounds good, Igor & welcome to DEV 🙂
There are so many posts that slip thru 😅 but we try to suggest to post a full content as much as we can.
Done. Is it ok now? Thank you! ;)
Looks much better~ 😃 Thank you, Igor.
And as a tip, you can also highlight code using triple backticks with language.
Wow! This looks better!! Thank you Sung! I appreciate your help!
dev.to has a tutorial with best practices?
Thank you!
You're welcome there, Igor :)
Unfortunately, there isn't a best practice but there isn't a "best practice" documentation 😅. (The syntax highlight is a nice-to-have).
It's a good idea so would you be able to create an issue requesting a best practice documentation?
github.com/thepracticaldev/dev.to/...
Some comments have been hidden by the post's author - find out more