Async call in React Hooks

async.js

const Main = () => {

  useEffect(() => { // runs after Main component is rendered
     async function init() {
      console.log('fetching suggestions ...');
      let response;

      try {
        response = await fetch('https://pokeapi.co/api/v2/pokemon/');
        response = await response.json();
      } catch( e ) {
        response = Promise.resolve({ results:[] });
      } finally {
        console.log('fetched response', response);
      }
      console.log('fetching suggestions done.');
    };
    init();
  }, []); // empty array make sure it only runs once

  console.log("render Main...");
  return (
    <h1>Hello World!!!</h1>
  );
}

Further reading
https://devtrium.com/posts/dependency-arrays
https://devtrium.com/posts/async-functions-useeffect
https://react.dev/learn/synchronizing-with-effects
https://react.dev/reference/react/StrictMode