fetch-pokemon.js

// NOTE: This is NOT how you'd normally use suspense.
// You'll either use react-cache or libraries that use react-cache.
// This is only for instructional purposes.

const cache = {}

function FetchPokemon({pokemonName}) {
  const pokemon = cache[pokemonName]
  if (!pokemon) {
    const promise = fetchPokemon(pokemonName).then(
      pokemon => (cache[pokemonName] = pokemon),
    )
    throw promise
  }
  return <pre>{JSON.stringify(pokemon || 'Unknown', null, 2)}</pre>
}

function PokemonInfo({pokemonName}) {
  return (
    <React.Placeholder fallback="loading...">
      <FetchPokemon pokemonName={pokemonName} />
    </React.Placeholder>
  )
}