Windowing or List virtualization is a concept of only rendering or write the visible portion in the current “ window ” to the DOM. The number of items that rendered at first time are smaller than the original one.
The remaining items are rendered when you scroll down to it. The DOM nodes of items that exit the window are replaced by the new ones. This improves the performance of rendering a large list.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import range from "lodash/range";
import "./styles.css";
function App() {
const [render, setRender] = useState(false);
const [itemCount, setItemCount] = useState(10000);
return (
<div>
<h1>
Render simple <code>{"<div />s"}</code>
</h1>
<div>
Item count:{" "}
<input
type="number"
value={itemCount}
onChange={({ target: { value } }) => {
setItemCount(value);
setRender(false);
}}
/>
</div>
<p>Notice the time it takes for the first loading</p>
<button onClick={() => setRender(true)}>Render</button>
<button onClick={() => setRender(false)}>Clear</button>
<div>
{render && range(itemCount).map(i => <div key={i}>Item {i}</div>)}
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
