Brilliant work..

[srini-venigalla]

I don't have any issues yet, tried a few samples on Sandbox, wanted to say Thank You.

[kruschid]

Some people might also want to consider a one-time donation but unfortunately the link is a little difficult to find:

https://www.paypal.me/lavrton

I found it in the about paragraph on the patreon page: https://www.patreon.com/lavrton

[ted-at-change]

Will definitely donate to konva, and perhaps react-konva. I just converted a project written using konva raw refs to react-konva. My 2 main takeaways are:

1. The code is so much more concise. Way less lines of code, way easier to understand, and better for co-workers to be able to leverage.
2. ... but, performance went down more than I had hoped. For complex renderings, is it expected to see performance hit using declarative React markup of Konva elements, or should I be looking for some common gotchas?

[lavrton]

In terms of the performance of react-konva, there are two side of the coin:

1. canvas rendering performance
2. React performance.

(1) For the canvas rendering (Konva) performance take a look here: https://konvajs.org/docs/performance/All_Performance_Tips.html#page-title

(2) With the React you have to do some ninja magic with react like useMemo, useCallback, memo.

For the best results you need to understand both sides and know how to use a profiler in dev tools.

[thetaungg]

With react, there will always be an extra cost of components lifecycles. You can only optimize so much with memoization
It's not noticeable if you don't mount a lot of konva components and they aren't mounted and unmounted very dynamically.

I was building a table library with react-konva and the elements needs to be re-rendered in every frame while scrolling. And I found out the React was the main performance bottleneck.
After much research, the way I fixed it was with batch rendering. I identified the most dynamic part and batch render them all together in a single component with a single function like this and I achieved 120fps.

   <Shape
                listening={false}
                perfectDrawEnabled={false}
                sceneFunc={ctx =>
                    drawCells(ctx, Math.max(columnStartIndex, frozenColumns), columnStopIndex)
                }
            />