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>;
}

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!

Comments

[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.

[Igor Quirino]

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!

[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.

[Igor Quirino]

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

[Sung M. Kim]

Looks much better~ 😃 Thank you, Igor.

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

[Igor Quirino]

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

[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/...