How to merge components in response?

Question

In a device with limited resources, it is common practice to use performance by combining components. For example, there is an endless scroll list. Since there are always about 10 components in the viewport, there can only be 20 instances of the components in the pool. When the user scrolls up or down, the components at the top or bottom are switched to the other side and filled with new data. Thus, the user believes that the list is long, but he accepts only 20 instances of the components.

With jQuery and imperative programming, it is easy to implement this method of combining components. However, in the React world, the user interface is declarative.

const List = ({listData}) => {
  return <ul>
    {listData.map(item => <li>{item}</li>);
  </ul>;
}

The code simply announces that there is a list of items to be displayed. Our code has no control for combining components; and I believe React itself will create a DOM pool.

So, how to implement a component pool for better performance?

Answer 1

The React-Virtualized library is an implementation of virtual lists for use in React applications. It's quite optimized, and I think it uses a lot of links and interaction with the DOM to accomplish what it needs to do.

, React ( , ), -, .

1000 , 20. render. , 30 , 30-50. , React .

, , React , . , , , , . .

, , :

render() {
    const {items} = this.props;
    const {displaySize, startIndex} = this.state;

    const itemsToDisplay = items.slice(startIndex, startIndex + displaySize + 1);

    const renderedItems = itemsToDisplay.map( (item, index) => {
        return <ListItem item={item} key={index} />
    });

    return (
        <div>
            {renderedItems}
        </div>
    );
}