title: Javascript/react loading function explanation
body: <p>I have found this piece of code for a component that displays dots on loading.</p>
  
  <pre><code>class LoadingDots extends React.Component {
      constructor(props, context) {
          super(props, context);
  
          this.state = {frame: 1};
      }
  
      componentDidMount() {
          this.interval = setInterval(() =&gt; {
              this.setState({ // eslint-disable-line react/no-did-mount-set-state
                  frame: this.state.frame + 1
              });
          }, this.props.interval);
      }
  
      componentWillUnmount() {
         clearInterval(this.interval);
      }
  
      render() {
          let dots = this.state.frame % (this.props.dots + 1);
          let text = '';
          while (dots &gt; 0) {
              text += '.';
              dots--;
          }
          return &lt;span {...this.props}&gt;{text}&amp;nbsp;&lt;/span&gt;;
      }
  }
  
  LoadingDots.defaultProps = {
      interval: 300, dots: 3
  };
  
  LoadingDots.propTypes = {
      interval: PropTypes.number,
      dots: PropTypes.number
  }
  </code></pre>
  
  <p>What I wonder is how is this being calculated so that it gives the result on the console like this one, when we pass the value of 20 for the dots property and 100 for the interval property?</p>
  
  <pre><code>let dots = this.state.frame % (this.props.dots + 1);
  console.log(dots) // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
  </code></pre>
  
  <p>What confuses me, is this part, since from what I thought if we pass <code>20</code>, and we have set the state to <code>frame: 1</code> then we would set the dots variable to <code>1</code>, since <code>1 % 21</code> is <code>1</code>, the first time on render function, and then in the while loop would just decrease it to <code>0</code> and it would stop there. So, I assume that react rerenders the template on each state change, so the frame increases on each interval, but how we go then from <code>0</code> to <code>20</code>, if the first time the frame is set to <code>1</code>, and then we decrease the <code>dots</code> in the <code>while</code> loop. Not sure about what is the point of decreasing the <code>dots</code> either in the <code>while</code> loop if we are already changing the variable on each interval?</p>