const { useState, useMemo } = React;

// Expensive function, should not run every render
const expensiveFilter = (pokemons) => {
  console.log('Expensive function')
  const filtred = pokemons
  .slice(0)
  .sort((p1, p2) => p1.name.localeCompare(p2.name))
  .map(({ name }) => ({ name: name.charAt(0).toUpperCase() + name.slice(1) }))

  return filtred;
}

function PokeWorld({ pokemons }) {
  const [selected, setSelected] = useState(null)
  
  // Filtred data
  const filtredPokemon = useMemo(() => expensiveFilter(pokemons), [])
  
  return (
    <>
      <span>{selected && selected.name}</span>
      <ul>
        {filtredPokemon.map((pokemon) => (
          <li>
            <button onClick={() => setSelected(pokemon)}>{pokemon.name}</button>
          </li>
        ))}
      </ul>
    </>
  )
}

const pokemons = [{"name":"bulbasaur"},{"name":"ivysaur"},{"name":"venusaur"},{"name":"charmander"},{"name":"charmeleon"},{"name":"charizard"},{"name":"squirtle"},{"name":"wartortle"},{"name":"blastoise"},{"name":"caterpie"},{"name":"metapod"},{"name":"butterfree"},{"name":"weedle"},{"name":"kakuna"},{"name":"beedrill"},{"name":"pidgey"},{"name":"pidgeotto"},{"name":"pidgeot"},{"name":"rattata"},{"name":"raticate"},{"name":"spearow"},{"name":"fearow"},{"name":"ekans"},{"name":"arbok"},{"name":"pikachu"},{"name":"raichu"},{"name":"sandshrew"},{"name":"sandslash"},{"name":"nidoran-f"},{"name":"nidorina"},{"name":"nidoqueen"},{"name":"nidoran-m"},{"name":"nidorino"},{"name":"nidoking"},{"name":"clefairy"},{"name":"clefable"},{"name":"vulpix"},{"name":"ninetales"},{"name":"jigglypuff"},{"name":"wigglytuff"}];

ReactDOM.render(<PokeWorld pokemons={pokemons} />, document.getElementById("root"));