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

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


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();}, []);


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);  })();}, []);


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