title: How to create an animated counter in React.js?
body: <p>I'm looking for a way to animate a counter in React.</p>
  
  <p>For the sake of the example, I have 3 components of the following structure:</p>
  
  <ul>
  <li>Master:</li>
  <li><ul>
  <li>logicComponent</li>
  </ul></li>
  <li><ul>
  <li>Counter</li>
  </ul></li>
  </ul>
  
  <p>(Master is the parent of logicComponent and Counter)</p>
  
  <p>The logic component passes a number to the master who passes it to the Counter component that should do the animation.
  The logicComponent sends the numbers in an incremental manner, that is, each time that something happens there, it sends an update.  </p>
  
  <p>For example, the logicCounter invokes the Master ten times to increment the counter, I would've expected that the Counter will be rendered 10 times showing 10 numbers.
  All the things I've tried so far resulted in showing the final number (10) without any incrementation. </p>
  
  <p>After looking for solutions, I came across <strong>Window.requestAnimationFrame()</strong> and I'm looking for a proper way to implement it in React. </p>
  
  <p>I'm trying to avoid 3rd party npms/libraries. </p>
  
  <p>Would love your help / ideas.
  Thanks.</p>