title: React Konva - Performance of large number of nodes
body: <p>I am trying to draw large number of nodes in React Konva based on this <a href="https://konvajs.org/docs/sandbox/20000_Nodes.html" rel="nofollow noreferrer">performance demo</a>.</p>
  <p>My code:</p>
  <pre><code>
  const ZoomTest = (props) =&gt; {
    let width = window.innerWidth;
    let height = window.innerHeight;
    const [rects, setRects] = useState([])
    const [node, setNode] = useState(null)
  
    function makeRects () {
        for (let x=0; x&lt;10000; x++) {
          var color = colors[colorIndex++];
          if (colorIndex &gt;= colors.length) {
            colorIndex = 0;
          }
  
          let randX = Math.random() * width;
          let randY = Math.random() * height;
  
          rects.push(&lt;Circle
                      id={x}
                      x={randX}
                      y={randY}
                      width={20}
                      height={20}
                      fill={color}
                      stroke={'blue'}
                      strokeWidth={1}
                      shadowBlur={0}
                     /&gt;)
        }
  
        setRects(rects)
      }
  
    function getRects() {
      if (rects.length === 0)
        makeRects()
  
      return rects
    }
  
    function tooltip() {
      if (node === null)
        return null
  
      return &lt;Label x={node.x} y={node.y} opacity={0.75}&gt;
                &lt;Tag fill={'black'} pointerDirection={'down'} pointerWidth={10} pointerHeight={10} lineJoin={'round'} shadowColor={'black'}
                      shadowBlur={10} shadowOffsetX={10} shadowOffsetY={10} shadowOpacity={0.2}/&gt;
                &lt;Text text={node.text} fill={'white'} fontSize={18} padding={5} /&gt;
            &lt;/Label&gt;
    }
  
    function onMouseOver(evt) {
      var node = evt.target;
      if (node) {
        // update tooltip
        var mousePos = node.getStage().getPointerPosition();
        setNode({ x: mousePos.x, y: mousePos.y, text: node.id() })
        console.log('node id = ', node.id())
      }
    }
  
    return (
        &lt;Stage
            width={window.innerWidth}
            height={window.innerHeight}
            draggable='false'
            onMouseOver={onMouseOver}
            onMouseMove={onMouseOver}
            onDragMove={onMouseOver}
        &gt;
          &lt;Layer&gt;
              {getRects()}
          &lt;/Layer&gt;
          &lt;Layer&gt;
              {tooltip()}
          &lt;/Layer&gt;
        &lt;/Stage&gt;
  
    )
  }
  </code></pre>
  <p>The issue is that tooltip is very slow as compared to the demo. I think this is due to re-renders of the component on every mouse event and this is causing the lag.</p>
  <p>Any idea how to make the react-konva performance similar to konvajs?</p>