DEV Community

Igor Quirino
Igor Quirino

Posted on • Originally published at wareboss.com

React Hook – Async function in useEffect

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>;
}
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

You can cancel this fetch when the component get destroyed, but this is another article (React Hook – Clean Up useEffect).

Bye!

Discussion (7)

Collapse
dance2die profile image
Info Comment hidden by post author - thread only accessible via permalink
Sung M. Kim

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_url frontmatter, 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.

Collapse
iquirino profile image
Igor Quirino Author

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!

Collapse
dance2die profile image
Sung M. Kim

Sounds good, Igor & welcome to DEV 🙂

i see another article doing exactly the same..

There are so many posts that slip thru 😅 but we try to suggest to post a full content as much as we can.

Thread Thread
iquirino profile image
Igor Quirino Author

Done. Is it ok now? Thank you! ;)

Thread Thread
dance2die profile image
Sung M. Kim

Looks much better~ 😃 Thank you, Igor.

And as a tip, you can also highlight code using triple backticks with language.

demo

Thread Thread
iquirino profile image
Igor Quirino Author

Wow! This looks better!! Thank you Sung! I appreciate your help!
dev.to has a tutorial with best practices?
Thank you!

Thread Thread
dance2die profile image
Sung M. Kim

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