React Изменение свойств компонента и не рендеринг каждый раз

Я изучаю React и пытаюсь использовать компонент для отображения сведений о выбранном элементе в таблице, моя проблема в том, что когда я нажимаю «Далее» в таблице (она разбита на страницы), состояние обновляется и повторно визуализирует компонент. и если я нажимаю много раз, он ставится в очередь, и компонент сведений меняется между всеми элементами, которые я нажимал.

Я не знаю, есть ли хорошая практика для таких вещей, я пытался найти что-то подобное, но пока ничего.

Компонент, который я использую (использую публичный API):

import React from 'react';

class Pokemon extends React.Component {
  constructor() {
    super();

    this.state = {
      name: "",
      abilities: [],
      stats: [],
      weight: 0,
      height: 0,
      base_experience: 0,
    };
  }


  fetch_pokemon = () => {
    fetch(this.props.pokemon_url)
    .then(res => res.json())
    .then(res => {
      this.setState({
        name: res.name,
        abilities: res.abilities,
        stats: res.stats,
        weight: res.weight,
        height: res.height,
        base_experience: res.base_experience,
      });
    });
  }

  render() {
    if (this.props.pokemon_url !== ''){
      this.fetch_pokemon();
      return (
        <div>
          <h1>{this.state.name}</h1>
          Weight: {this.state.weight}<br />
          Height: {this.state.height}<br />
          Abilities:
          <ul>
            {this.state.abilities.map(({ability}, index) => {
              return (<li key = {index}>{ability.name}</li>);
            })}
          </ul>
        </div>
      );
    }
    else{
      return (<h3>Choose one pokémon from the list...</h3>);
    }
  }
}

export default Pokemon;

Моя основная составляющая:

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import Pokemon from './Pokemon';


class App extends Component {
  constructor() {
    const i_pokemons = 25;
    super();
    this.state = {
      pokemons: [],
      pokemons_list: [],
      pokemon_show_list: [],
      p_init: 0,
      p_final: i_pokemons,
      pagination: i_pokemons,
      pages: 0,
      status: '',
      enable_buttons: false,
      current_page: 0,
      current_pokemon_url: '',
      URL: `https://pokeapi.co/api/v2/pokemon/?limit=99999`
    };
  }

  componentDidMount(){
    this.fetch_pokemons();
  }

  prev(){
    this.setState({
      current_page: this.state.current_page - 1,
      p_init: this.state.p_init - this.state.pagination,
      p_final: this.state.p_final - this.state.pagination
    }, () => {
      this.fetch_new_page();
    });
  }
  next(){
    this.setState({
      current_page: this.state.current_page + 1,
      p_init: this.state.p_init + this.state.pagination,
      p_final: this.state.p_final + this.state.pagination
    }, () => {
      this.fetch_new_page();
    });
  }

  fetch_new_page = () => {
    const current_id = (this.state.current_page - 1) * this.state.pagination;
    this.setState({
      pokemon_show_list: this.state.pokemons_list.slice(current_id, current_id + 25)
    });
    this.fetch_pokemons();
  }

  fetch_pokemons = callback => {
    this.setState({
      status: 'Waiting for the server and retrieving data, please wait...',
      enable_buttons: false
    });
    return new Promise((resolve, reject) => {
      fetch(this.state.URL)
      .then(res => res.json())
      .then(res => {
        if (!res.detail){
          this.setState({
            pokemons: res,
            pokemons_list: res.results,
            enable_buttons: true,
            status: 'Done',
            pokemon_show_list: res.results.slice(this.state.p_init, this.state.p_final)
          });
          if (this.state.pages === 0){
            this.setState({
              pages: Math.round(this.state.pokemons_list.length / this.state.pagination),
              current_page: 1
            });
          }
          resolve(true);
        }else{
          reject("Error");
          this.setState({status: `Error`});
        }
      })
      .catch(error =>  {
        this.setState({status: `Error: ${error}`});
        reject(error);
      });
    });

  }

  showPokemon({url}){
    this.setState({
      current_pokemon_url: url
    });
  }

  render() {
    console.info("Render");
    return(
      <div className = "general">
        <div className = "pokemons-info">
          {this.state.status !== '' && this.state.status}
          <br />
            <table className = "pokemon-list">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>More info.</th>
                </tr>
              </thead>
              <tbody>

                {this.state.pokemon_show_list.map((pokemon, index) => {
                  return (
                    <tr className = "l" key = {index}>
                      <td>{pokemon.name}</td>
                      <td><a className = "btn btn-secondary" onClick = {this.showPokemon.bind(this, pokemon)} href = {`#${pokemon.name}`}>More info.</a></td>
                    </tr>
                  );
                })}
            </tbody>
          </table>
          <button className = "btn btn-primary" disabled = {this.state.current_page <= 1} onClick = {this.prev.bind(this)}>Prev</button>
          Page: {this.state.current_page} of {this.state.pages}
          <button className = "btn btn-primary" disabled = {this.state.current_page === this.state.pages} onClick = {this.next.bind(this)}>Next</button>
        </div>
        <Pokemon pokemon_url = {this.state.current_pokemon_url}/>
    </div>
    );
  }
}

export default App;

Feel free for giving any advice