ReactJS Rendering Pattern ~Visualization Pattern~

・This pattern renders large lists efficiently by only showing items that are visible in the viewport. This dramatically improves performance when dealing with thousands of list items, as it avoids the creation of unnecessary DOM nodes. In this case, I use the react-window library.

import { List } from "react-window";

const items = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);

function Row({ index, items, styles }) {
  return <div style={styles}>{items[index]}</div>;
}

function App() {
  return (
    <div>
       <List
        rowCount={items.length}
        rowHeight={20}
        rowComponent={Row}
        rowProps={{ items }}
        height={500}
        width={400}
      />
    </div>
  );
}

export default App;