title: ReactJS how to render a component only when scroll down and reach it on the page?
body: <p>I have a react component <code>Data</code> which includes several charts components; <code>BarChart</code> <code>LineChart</code> ...etc.</p>
  
  <p>When <code>Data</code> component starts rendering, it takes a while till receiving the data required for each chart from APIs, then it starts to respond and render all the charts components.</p>
  
  <p>What I need is, to start rendering each chart <strong>only</strong> when I scroll down and reach it on the page.</p>
  
  <p>Is there any way could help me achieving this?? </p>