How to speed up large data in reactjs?

Question

I am trying to get million of data and showing the data tables. Now, I am trying to check static data instead of getting from database.

class UL extends React.Compontent {
  state = {
    data: [],
  };

  getPublicationApcWaiverConfigListData = () => {
   let data = [];

    for (let i = 0; i <= 100000; i++) {
      data.push({
        id: i,
        publisher_name: "item.publisher_name",
        publication_name: "item.publication_name",
      });
    }
    this.setState({
      data: data,
    });
  };


  render() {
    let heading = ["publication_name", "content_type", "expiry_date"];


    return (
      <div

      >
        <div className="row filter-md-4">
          <div className="col-12">
              {this.state.data && (
                <DataTable
                  heading={heading}
                  data={this.state.data}
                />
              )}
            </div>
        </div>
      </div>
    );
  }
}

The problem is that the components is very slowly when I am trying to show list of datas in data tables.

How can I get list of data quickly?

Answer 1

I think the best solution is to split your data into some smaller parts like 100 iteration and 1000 push in each iteration. at first just load first 1000 items and use a sensor and send next requests when you reach to the end of div.

import Sensor from 'react-visibility-sensor'

function MyComponent (props) {
  state = {
    data: [],
  };

let index = 0

getPublicationApcWaiverConfigListData = (isVisible) => {
   let data = this.state.data
   if (!isVisible) return;

    for (let i = index; i <= index + 1000; i++) {
      data.push({
        id: i,
        publisher_name: "item.publisher_name",
        publication_name: "item.publication_name",
      });
    }
    this.setState({
      data: data,
    });
  };

  return (
      <div className="row filter-md-4">
          <div className="col-12">
              {this.state.data && (
                <DataTable
                  heading={heading}
                  data={this.state.data}
                />
               <Sensor onChange={this.getPublicationApcWaiverConfigListData} />
              )}
            </div>
        </div>
  );
}