#root
View Compiled
html, body, #root {
  height: 100%;
  padding: 0;
  margin: 0;
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
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 = 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"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.min.js