Ndtyjky

I was trying the useEffect example something like below:

useEffect(async () => {

    try {

        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);

        const json = await response.json();

        setPosts(json.data.children.map(it => it.data));

    } catch (e) {

        console.error(e);

    }

}, );

and I get this warning in my console. But the cleanup is optional for async calls I think. I am not sure why I get this warning. Linking sandbox for examples. https://codesandbox.io/s/24rj871r0p

I suggest to look at Dan Abramov (one of the react creators) answer here:

I think you're making it more complicated than it needs to be.

async function fetchMyAPI() {

  let url = 'http://something';

  let config = {};

  const response = await myFetch(url);

  console.log(response);

}



useEffect(() => {

  fetchMyAPI();

}, );

Longer term we'll discourage this pattern because it encourages race conditions. Such as — anything could happen between your call starts and ends, and you could have gotten new props. Instead, we'll recommend Suspense for data fetching which will look more like

const response = MyAPIResource.read();

and no effects. But in the meantime you can move the async stuff to a separate function and call it.

When you use an async function like

async () => {

    try {

        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);

        const json = await response.json();

        setPosts(json.data.children.map(it => it.data));

    } catch (e) {

        console.error(e);

    }

}

it returns a promise and useEffect doesn't expect the callback function to return Promise, rather it expects that nothing is returned or a function is returned.

As a workaround for the warning you can use a self invoking async function.

useEffect(() => {

    (async function() {

        try {

            const response = await fetch(

                `https://www.reddit.com/r/${subreddit}.json`

            );

            const json = await response.json();

            setPosts(json.data.children.map(it => it.data));

        } catch (e) {

            console.error(e);

        }

    })();

}, );

or to make it more cleaner you could define a function and then call it

useEffect(() => {

    async function fetchData() {

        try {

            const response = await fetch(

                `https://www.reddit.com/r/${subreddit}.json`

            );

            const json = await response.json();

            setPosts(json.data.children.map(it => it.data));

        } catch (e) {

            console.error(e);

        }

    };

    fetchData();

}, );

the second solution will make it easier to read and will help you write code to cancel previous requests if a new one is fired or save the latest request response in state

Working codesandbox

Until React provides a better way, you can create a helper, useEffectAsync.js:

import { useEffect } from 'react';





export default function useEffectAsync(effect, inputs) {

    useEffect(() => {

        effect();

    }, inputs);

}

Now you can pass an async function:

useEffectAsync(async () => {

    const items = await fetchSomeItems();

    console.log(items);

}, );