react-konva performace issue when render 4000+ n order bezier curve shape

Question

Now i need to render thousands of n order bezer curve shape in my draggable stage, using react-konva.It is working in first rendering.But when i drag the stage, fps is going to unstable.There is a demo. Demo

I had try some optimization tips, such as cache bezier array caculation, optimize strokes, disable perfect drawing.It seems better, but still not have a smooth animation when i drag it.

Answer 1

If possible, you should think about caching. It will boost performance a lot:

const layerRef = React.useRef();
  React.useEffect(() => {
    layerRef.current.cache({
      width: 200,
      height: 200,
    });
  }, []);

<Layer ref={layerRef}>

Demo: https://codesandbox.io/p/sandbox/konva-bezier-forked-j298rj?file=%2Fsrc%2Findex.js%3A47%2C7-47%2C29