I'm a little confused by the concept of async/await, especially when compared to .then() in functions.

I'm currently working with a basic React app and getting some data in useEffect

I'm wondering, since fetch returns a Promise, why I don't need to mark anything as async or await when executing the following example :

useEffect(() => {
    fetch("whatever").then(res => console.log(res));
  }, [])

But when I choose to execute await, I need to wrap the code in an async function

useEffect(() => {
    // error, needs to be in an async function
    const res = await fetch("whatever");
  },[])

I guess my question is actually what is the difference between using .then() vs using async await links and why . then() doesn't require me to wait for anything, even if getting returns a promise? < /p>

Thanks