title: React delayed rendering
body: <p>Assume I have a tab control component written in React. Only the active tab will be rendered for better performance (if I render all tabs, it will take 5 seconds, because there are about 20 tabs, each containing plenty of data). Other tabs will be rendered when I click them to activate them.</p>
  
  <p>This works very well except for one tab. The special tab is much bigger than others, it contains a table that has 2000 rows, so React takes 3 seconds to render it. This makes the user experience pretty bad: you click the tab, nothing happens for 3 seconds because React is busy rendering, then suddenly the big table appears.</p>
  
  <p>Without React, I usually do this:</p>
  
  <ol>
  <li>Put some loading indicator in the new active tab</li>
  <li>Switch to the new active tab</li>
  <li><code>setTimeout(render(), 50);</code></li>
  </ol>
  
  <p>Since the actual rendering happens after 50ms, browser has enough time to update UI. User will see the new active tab immediately after they click it, and there is a loading indicator in the new active tab, now waiting 3 seconds is much more acceptable.</p>
  
  <p>With React, the render() method is called by React framework, is it possible to do something similar to step 3?</p>
  
  <p>I know I can replace the huge table with a paginated table, so only limited number of rows will be rendered at the same time. But my question is focused on dealing with UI components that need significant time to render.</p>