Carousel

Carousel.jsx

import PropTypes from 'prop-types';
import React from 'react';

class Carousel extends React.Component {
    static propTypes = {
        limit: PropTypes.number,
        total: PropTypes.number,
        data: PropTypes.oneOfType([
            PropTypes.object,
            PropTypes.array
        ])
    };

    _mounted = false;

    static getDerivedStateFromProps(props, state) {
        let nextState = null;

        if ((props.limit !== state.next.limit) ||
            (props.total !== state.next.total) ||
            (props.data !== state.next.data)) {
            const {
                limit = state.next.limit,
                total = state.next.total,
                data = state.next.data,
            } = props;

            nextState = {
                next: {
                    limit,
                    total,
                    data
                }
            };
        }

        return nextState;
    }

    constructor(props) {
        super(props);

        const limit = Number(this.props.limit) || 0;
        const total = Number(this.props.total) || 0;

        this.state = {
            current: {
                offset: 0,
                limit: limit,
                total: total,
                data: this.props.data,
            },
            next: {
                limit: limit,
                total: total,
                data: this.props.data,
            }
        };
    }

    next = () => {
        if (!this._mounted) {
            return;
        }

        this.setState(state => {
            const { current, next } = state;
            const { offset, limit, total, data } = current;

            if (offset + limit >= total) {
                const {
                    limit: nextLimit = limit,
                    total: nextTotal = total,
                    data: nextData = data
                } = next;

                return {
                    current: {
                        offset: 0,
                        limit: nextLimit,
                        total: nextTotal,
                        data: nextData
                    }
                };
            }

            return {
                current: {
                    offset: offset + limit,
                    limit,
                    total,
                    data
                }
            };
        });
    };

    componentDidMount() {
        this._mounted = true;
    }

    componentWillUnmount() {
        this._mounted = false;
    }

    render() {
        const {
            current: { offset, limit, total, data }
        } = this.state;
        const next = this.next;

        return this.props.children({
            offset,
            limit,
            total,
            data,
            next,
        });
    }
}

export default Carousel;

<Carousel limit={10} total={100} data={data}>
    {({ offset, limit, total, data, next }) => {
        if (!data) {
            return null;
        }

        setTimeout(() => next(), 2000);

        const start = offset;
        const end = offset + limit;
        const slicedData = data.slice(start, end);

        return (
            <div>{/* TODO */}</div>
        );
    }}
</Carousel>

awesome