Crear un Scroll Infinito para tu Aplicación React JS

A medida que te vas adentrando en el desarrollo de aplicaciones en React JS te darás cuenta que necesitas paginar la información que muestras en ella a tus usuarios, y es que no es lo mismo el rendimiento de tu app tratando de mostrar(Renderizar) toda la información proveniente de la Base de Datos que solo mostrar parte de ella. En esta publicación te enseñaré como paginar la información de tu app y mejorar su rendimiento en tiempo de respuesta. Lo primero que debes hacer es instalarte el siguiente componente: npm i react-infinite-scroller ¿Cómo usarlo? Solo debes incluirlo en tu app de la siguiente manera: import InfiniteScroll from 'react-infinite-scroller'; Vamos a inicializar una variable divsque contendra el contenido inicial y te mostraré como deberia de quedar el construcctor de tu clase: ` const divs = [

Div no 1
,
Div no 2
,
Div no 3
,
Div no 4
,
Div no 5
,
Div no 6
,
Div no 7
,
Div no 8
, ]; export default class TUCLASE extends React.Component { constructor () { super(); this.state = { divs: divs }; this.generateDivs = this.generateDivs.bind(this); } ... `

Ahora su método Render debria de quedar así:

render() { return ( Loading ...
}> { this.state.divs } ) }

Si se fijan el atributo loadMore se indica la función de donde se obtendrán más datos para mostrar, en este caso una función llamada this.generateDivs que te voy a mostrar:

js generateDivs () { let moreDivs = []; let count = this.state.divs.length; for (let i = 0; i < 30; i++) { moreDivs.push(
Div no {count}
); } setTimeout(() => { this.setState({divs: this.state.divs.concat(moreDivs)}); }, 500); } Con todo esto tendrias lo mínimo para que funcione tu scroll infinito paginando asi la información a medida que el usuario va haciendo scroll en tu app. Como te mostre anteriormente en la función anterior se va generando nuevos "divs" a medidas que es invocada en loadMore. Para mayor información puedes dirigirte al siguiente enlace de donde descargue el componente: https://github.com/CassetteRocks/react-infinite-scroller