Async Components

In Xania, using async / await is not limited to only server components. In the following example we call fetchPokemon from inside our Component. We can do this because a Function Component is just a regular function that happens to returns a view. In fact, calling Pokemon({ id : 1}) is equivalent to <Pokemon id={1}>

async function Pokemon(props: { id }) {
  const pokemon = await fetchPokemon(id)
  return (
    <>
      <div>
        <b>{pokemon.name}</b>
      </div>
      <div>
        {abilities.map((a) => (
          <li>{a.name}</li>
        ))}
      </div>
    </>
  );
}

And for completeness here is the implementation of fetchPokemon we used above

type Pokemon = { name: string }
function fetchPokemon (id) { 
  return fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
    .then(r => r.json())  as Promise<Pokemon>;
}