React Hook – Async function in useEffect

#react #useeffect #async #hook

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)

Comment hidden by post author - thread only accessible via permalink

Sung M. Kim • Dec 18 '19

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 • Dec 18 '19

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!