title: React: How to achieve element-by-element in-order rendering in a large list?
body: <p>I'm running into a problem in React. As shown in the figure below, if there are many elements in a list, such as 100 elements, then use a component to render the view of each element in a For loop, and the web page will take several seconds to completely rendering, and no operations can be performed during rendering.</p>
  <p><a href="https://i.stack.imgur.com/ecGDi.png" rel="nofollow noreferrer">Figure 1</a></p>
  <p>I think it's because the entire rendering process occupies the main process, and that lead to program cannot respond before completely rendering.</p>
  <p>In order to improve page generation efficiency and response time, I came up with a compromise solution. As shown in the figure below, we first render the placeholder image of the entire list according to the number of lists in advance, and then render the real data one by one according to the order.</p>
  <p><a href="https://i.stack.imgur.com/sWOmG.png" rel="nofollow noreferrer">Figure 2</a></p>
  <p>As shown in the figure below, for example, we have 100 elements, then render 100 empty divs or placeholders first, and then render a real element every 100/200 milliseconds.</p>
  <p><a href="https://i.stack.imgur.com/h3fy5.png" rel="nofollow noreferrer">Figure 3</a></p>
  <p>Finally, after N renderings, the effect shown below will be formed. Of course, it's best to do so that only the placeholders that the user sees will render the real data.</p>
  <p><a href="https://i.stack.imgur.com/Glmpb.png" rel="nofollow noreferrer">Figure 4</a></p>
  <p>Back to question, I am very unfamiliar with React, can I do this with React? Is there a corresponding library that can be used in React?</p>