Effects callbacks are synchronous to prevent race conditions. Put the async function inside :
Incorrect
useEffect( async ( )=> {
const response = await fetch("https://reactfoodc6f5e/food.json");
const reponse = await response.json();
fetchData();
}, [ ])
Correct
useEffect( ( )=> {
async function fetchData(){
const reponse = await response.json();
}
fetchData();
}, [ ])
fetch returns a promise li2an send httprequest huwe asynchrouns task
useeffect hye motazamene fa mafina nhet el async directly fia..so el hal huwe ano nesta3mel function fia async jaweta.