const { useState, useCallback, memo } = React;

function PokeWorld({ pokemons }) {
  const [selected, setSelected] = useState(null);
  // Fonction commune à passer au composant enfant
  const handleClick = useCallback((pokemon) => {
    setSelected(pokemon);
  }, [pokemons]);

  return (
    <>
      <span>{selected && selected.name}</span>
      <BigPokedexList pokemons={pokemons} handleClick={handleClick} />
    </>
  );
}

// Composant mémoïsé qui n'effectuera de rendu que si la valeur props changent
const BigPokedexList = React.memo(({ pokemons, handleClick }) => {
  return (
    <ul>
      {pokemons.map((pokemon) => console.log(`render ${pokemon.name}`) || (
        <li>
          {
            // À chaque clic sur un bouton, le composant BigPokedexList et tous ses composants enfants sont rafraichit
          }
          <button onClick={() => handleClick(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"));