title: How to create a 'Load More' feature without re-rendering entire component in React/Node?
body: <p>I'm trying to create a simple poll app, where you can make new polls. </p>
  
  <p>In the section 'MyPolls', I want it to render only the first 5 polls that I've made instead of rendering the entire list of polls. </p>
  
  <p>At the bottom is a 'Load More' button, where upon clicking, loads another 5 polls and so on.</p>
  
  <p>I've been using Mongoose/MongoDB backend and my approach has been to use <code>skip</code> and <code>limit</code>.</p>
  
  <p>I've managed to implement this feature, but the problem is the entire component re-renders, which is annoying for a user as you have to scroll down again the click the 'Load More' button.</p>
  
  <p>Here is my app: <a href="https://voting-app-drhectapus.herokuapp.com/" rel="nofollow noreferrer">https://voting-app-drhectapus.herokuapp.com/</a></p>
  
  <p>(use can you these login details for convenience:
  username: <code>riverfish@gmail.com</code>
  password: <code>123</code>)</p>
  
  <p>And then goto the <code>My Polls</code> page.</p>
  
  <p><strong>MyPoll.js</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import * as actions from '../../actions';
  
  class MyPolls extends Component {
    constructor(props) {
      super(props);
      this.state = {
        skip: 0
      };
    }
  
    componentDidMount() {
      this.props.fetchMyPolls(this.state.skip);
      this.setState({ skip: this.state.skip + 5 });
    }
  
    sumVotes(polls) {
      return polls.reduce((a, b) =&gt; {
        return a.votes + b.votes;
      });
    }
  
    loadMore(skip) {
      this.props.fetchMyPolls(skip);
      const nextSkip = this.state.skip + 5;
      this.setState({ skip: nextSkip });
    }
  
    renderPolls() {
      return this.props.polls.map(poll =&gt; {
        return (
          &lt;div className='card' key={poll._id}&gt;
            &lt;div className='card-content'&gt;
              &lt;span className='card-title'&gt;{poll.title}&lt;/span&gt;
              &lt;p&gt;Votes: {this.sumVotes(poll.options)}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )
      })
    }
  
    render() {
      console.log('polls', this.props.polls);
      console.log('skip:', this.state.skip);
      return (
        &lt;div&gt;
          &lt;h2&gt;My Polls&lt;/h2&gt;
          {this.renderPolls()}
          &lt;a href='#' onClick={() =&gt; this.loadMore(this.state.skip)}&gt;Load More&lt;/a&gt;
        &lt;/div&gt;
  
      );
    }
  }
  
  function mapStateToProps({ polls }) {
    return { polls }
  }
  
  export default connect(mapStateToProps, actions)(MyPolls);
  </code></pre>
  
  <p><strong>Action creator:</strong></p>
  
  <pre><code>export const fetchMyPolls = (skip) =&gt; async dispatch =&gt; {
    const res = await axios.get(`/api/mypolls/${skip}`);
  
    dispatch({ type: FETCH_MY_POLLS, payload: res.data });
  }
  </code></pre>
  
  <p><strong>Poll route:</strong></p>
  
  <pre><code>app.get('/api/mypolls/:skip', requireLogin, (req, res) =&gt; {
  
      console.log(req.params.skip);
  
      Poll.find({ _user: req.user.id })
        .sort({ dateCreated: -1 })
        .skip(parseInt(req.params.skip))
        .limit(5)
        .then(polls =&gt; {
          res.send(polls);
        });
    });
  </code></pre>
  
  <p>Entire github repo: <a href="https://github.com/drhectapus/voting-app" rel="nofollow noreferrer">https://github.com/drhectapus/voting-app</a></p>
  
  <p>I understand that might method of implementing this feature might be the best possible solution so I'm open to any suggestions.</p>