react-sliced-list v1.0.2

Optimizing rendering performace for a long list

Render only partial items from your long list for better performace

Render 20,000 rows with mouse hover event

Using the component

Without ( slow on even changing row background )

This example shows how to use the component. We get start and end values via children. use these values to slice your list.

function App() {
  const arr = Array(20000);
  for (let i = 0; i < 20000; i++) {
    arr[i] = i;
  }

  const getRows = (start, end) => {
    const slice = arr.slice(start, end);
    return slice.map((num) => {
      return <Row number={num} />
    })
  }

  return (
    <div className="App">
      <SlicedList
        listStyle={{ height: '400px', width: '400px' }}
        totalRows={20000}
        rowHeight={40}>
        {(start, end) => {
          return getRows(start, end)
        }}
      </SlicedList>
    </div>
  );
}