How to call an async function inside a UseEffect() in React?

Question

I would like to call an async function and get the result for my UseEffect.

The fetch api examples i found on the internet are directly made in the useEffect functio

Answer 1

If you're invoking it right-away you might want to use it as an anonymous function:

useEffect(() => {

  (async () => {
     const data = await getData(1);
     setData(data);
  })();

}, []);

Answer 2

It would be best if you did what the warning suggests - call the async function inside the effect.

function blabla() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get(`http://url/api/data/1`)
         .then(result => {
            setData(result.data);
         })
         .catch(console.error)
    }, [setData]);

    return (
        <div>
            this is the {data["name"]}
        </div>
    );
}

Answer 3

You can still define the async function outside of the hook and call it within the hook.

const fetchData = async () => {
   const data = await getData(1);
   setData(data);
}

useEffect(() => {
  fetchData();
}, []);

Answer 4

Create an async function inside your effect that wait the getData(1) result then call setData():

useEffect(() => {
  const fetchData = async () => {
     const data = await getData(1);
     setData(data);
  }

  fetchData();
}, []);