title: Why I get 30 fps in chrome dev tool performance panel, but JS and React both say it's 60?
body: <p>I'm trying to use react to develop the classic game tutorial <a href="http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/" rel="nofollow noreferrer">how-to-make-a-simple-html5-canvas-game</a>.</p>
  
  <p>Everything went well until I found my movement is a little bit glitchy, <a href="https://catchgoblins.netlify.com/" rel="nofollow noreferrer">online test link</a> and <a href="https://github.com/Stupidism/rummikub/tree/master/apps/waves" rel="nofollow noreferrer">code</a>. </p>
  
  <p><a href="https://i.stack.imgur.com/N98x7.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N98x7.gif" alt="enter image description here"></a></p>
  
  <p>While the original <a href="http://www.lostdecadegames.com/demos/simple_canvas_game/" rel="nofollow noreferrer">game</a> written in JS is much smoother:</p>
  
  <p><a href="https://i.stack.imgur.com/gV83D.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gV83D.gif" alt="enter image description here"></a></p>
  
  <p>So I dig into it a little bit and found the actual fps is different:</p>
  
  <p>React:</p>
  
  <p><a href="https://i.stack.imgur.com/xjOH3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xjOH3.png" alt="enter image description here"></a></p>
  
  <p>Pure JS:
  <a href="https://i.stack.imgur.com/oL6mq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oL6mq.png" alt="enter image description here"></a></p>
  
  <p>It is weird that after I added some code to calc fps I get "60 fps" in both react hook and useEffect:</p>
  
  <pre><code>
  // log interval in useEffect
    useEffect(() =&gt; {
      console.log('interval', Date.now() - renderTime.current);
      renderTime.current = Date.now();
    });
  
  // calc fps in hook directly
  fps: rangeShrink(Math.round(1000 / (Date.now() - time.current)), 0, 60),
  
  // render
           &lt;Text 
            x={width - 120} 
            y={borderWidth} 
            text={`FPS: ${fps}`}
            fill="white"
            fontSize={24}
            align="right"
            fontFamily="Helvetica"
          /&gt;
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ykWzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ykWzN.png" alt="enter image description here"></a></p>
  
  <h1>Locating The Problem</h1>
  
  <p>I added a contrasting canvas, which renders every time when <code>heroPos</code> is updated. It gets me 60FPS in the chrome dev tool. Now the problem is definitely caused by the canvas library I'm using: react-konva.</p>
  
  <pre><code>  const canvasRef = useRef(null);
  
    useEffect(() =&gt; {
      const ctx = canvasRef.current.getContext('2d');
      if (backgroundStatus === 'loaded') {
        ctx.drawImage(backgroundImage, 0, 0);
      }
      if (heroStatus === 'loaded') {
        ctx.drawImage(heroImage, heroPos.x, heroPos.y);
      }
    }, [backgroundStatus, heroStatus, heroPos]);
  </code></pre>
  
  <h1>Located the problem</h1>
  
  <p>I located the problem, it's caused by the <a href="https://github.com/konvajs/react-konva/blob/9b3b2f4ecb446fe21f6370c4d33be854b5bd1d74/src/makeUpdates.js#L109" rel="nofollow noreferrer">batchDraw</a> <code>react-konva</code> used:</p>
  
  <p>After changing this line, I can get 60fps movement now.</p>
  
  <pre><code>-  drawingNode &amp;&amp; drawingNode.batchDraw();
  +  drawingNode &amp;&amp; drawingNode.draw();
  </code></pre>
  
  <p>According to their <a href="https://konvajs.org/api/Konva.BaseLayer.html#batchDraw" rel="nofollow noreferrer">doc</a>, batchDraw would draw in <code>the next animationFrame</code>. But <code>react</code> itself also uses <code>RAF</code> to trigger the next props update, so the <code>batchDraw</code> here happens <code>2 frames</code> after I <code>setHeroPos()</code>.</p>
  
  <h1>Solution:</h1>
  
  <p>I'm gonna submit a <a href="https://github.com/konvajs/react-konva/pull/448" rel="nofollow noreferrer">pull-request</a> to their project.</p>