title: React-Native path rendering slowdown using requestAnimationFrame with polyline
body: <p>I'm implementing a cardiac monitor like the blue line in <a href="https://www.youtube.com/watch?v=svbbw6Fq9oA" rel="nofollow noreferrer">this</a> video. I'm using a Polyline and <em>requestAnimationFrame</em>. Starting with a Polyline of length 0, every frame adds another point to the Polyline in state and triggers a re-render. The animation starts off snappy and smooth but it gets slower and slower as the length of the Polyline increases.</p>
  
  <p>I've tried throttling the framerate and I've replaced the waveform computation with something extremely simple and it still gets slower. I'm not sure, but I think this is because its re-rendering the entire Polyline every time - as the Polyline gets bigger, the renders take longer. I am running this component on an Android Nexus tablet.</p>
  
  <pre><code>componentDidMount() {    
      this.fps = 30;
      this.then = Date.now();
      this.interval = 1000 / this.fps;
      this._frameId = requestAnimationFrame(() =&gt; {
          this.renderFrame();
      });
  }
  
  renderFrame() {
      const stepsize = 5;
      x = this.x + stepsize;
      this.arrIndex += stepsize;
      y = this._waveform(this.arrIndex);
  
      if (x &lt; this.state.dimensions.width) {
          this.x = x;
          this.y = y;
          var newPoint = x + "," + y + " "
          this.path += newPoint
          this.setState({path:this.path});
      } else {
          this.x = 0;
          this.y = 50;
          this.path = ""
      }
      this._frameId = requestAnimationFrame(this.renderFrame);
  }
  
  render() {
      return (
          &lt;View style={{ flex: 1, alignSelf: 'stretch' }} onLayout={this.onLayout} &gt;
          &lt;Svg height={this.state.dimensions.height} width={this.state.dimensions.width}&gt;
          &lt;Polyline points={this.state.path}
              fill="none"
              stroke="green"
              strokeWidth="1"/&gt;
          &lt;Rect x={this.x -5} width="10" height={this.state.dimensions.height} fill="#1c2321"/&gt;
          &lt;/Svg&gt;
          &lt;/View&gt;);
  }
  </code></pre>
  
  <p>The monitor should smoothly render at the same rate for each pass, but its much faster at the beginning and gets progressively slower as it carries on.</p>