child to parent component update stuck in infinite loop (reactjs)

I'm trying to make a Pagination Component which will receive an array of objects from its parent and then send back the sliced array depending upon the number of items to show on a page at once. Here's the code:

Parent Component:

...
constructor() {
    super();
    this.state = {
      allAlbums: null,
      albums: null,
    }
  }

  componentDidMount = () => {
    const artistId = this.props.match.params.id;

    fetch(`//api here`)
        .then(res => {
          return res.json()
        }).then(data => {
          let allAlbums = data.album.map(album => {
            return (
              <div key={album.idAlbum}>
                <img src={album.strAlbumThumb}
                     alt={album.strAlbum} />
                <h4>{album.strAlbum}</h4>
              </div>
            )
          });
      this.setState({allAlbums})
    })
  };

  setAlbumsList = albums => this.setState({albums});

  render() {
    const {albums, allAlbums} = this.state;

    return (
        <div>
          {albums}
          <PaginationComponent list={allAlbums} updatedList={this.setAlbumsList} />
        </div>
    );
  }

Pagination(Child) Component:

...
constructor() {
    super();
    this.state = {
      totalResults: null,
      currentPage: 0,
      itemsPerPage: 10,
      startIndex: 0,
      lastIndex: null,
      shouldIncrement: true
    }
  }

  componentWillReceiveProps = (nextProps, nextState) => {
    const {totalResults} = nextState;
    const {list} = nextProps;

    if (list) {
      const totalResults = list.length;
      this.setState({totalResults}, () => this.applyPagination(list));
    }
  };

  applyPagination = list => {
    const {currentPage, itemsPerPage, totalResults} = this.state;
    const startIndex = currentPage * itemsPerPage;
    let lastIndex = startIndex + itemsPerPage;

    if (lastIndex>totalResults) {
      lastIndex = startIndex + (totalResults % itemsPerPage);
      this.setState({shouldIncrement: false})
    }

    const slicedList = list.splice(startIndex, lastIndex);

    this.setState({startIndex, lastIndex});
    this.props.updatedList(slicedList);
  };

  incrementPage = (list, count) => {
    if (count === 1) {
      const {currentPage, shouldIncrement} = this.state;

      if (shouldIncrement)
        this.setState({currentPage: currentPage + 1}, () => this.applyPagination(list))
    }
  };

  render() {
    const {totalResults, startIndex, lastIndex} = this.state;
    const {list} = this.props;

    return (
        <div>
          <p>Showing {startIndex+1}-{lastIndex} of {totalResults}</p>
          <span onClick={() => this.incrementPage(list, 1)}>{`>`}</span>
        </div>
    )
  }

The Problem:

Currently, the code is stuck in an infinite loop because the setState() keeps getting called in both components. Eventually, I want to be able to send the sliced array from the child component up to the parent component and then render it.