How to Use Konva like Konva in React?

[movie42]

I am a frontend developer working on a project using Konva in React. My task involves creating, positioning, and resizing tables for a store layout and then saving these configurations to a server.

I have completed the development by referring to Konva.js's official documentation and numerous examples available online. However, I'm questioning whether I've used Konva in the most effective way. The issue I'm encountering is related to rendering performance. Whenever I change the state of a table, it triggers re-renders ranging from one to even a hundred tables. It seems that these re-renders are driven more by React’s state management with Recoil rather than by Konva.js itself. This isn't a problem initially, but as I spend more time on the page and make more changes to the tables, I increasingly face performance issues, especially noticeable in the frame drops when moving or transforming shapes in Konva.js.

For instance, consider the following example where I've applied a collision detection algorithm.

const tables = useRecoilValue(tableAtom)
const rectRef = useRef(null)
const [collision, setCollision] = useState(false)

  useEffect(() => {
    if (rectRef.current) {
      const rect = rectRef.current;
      collisionDetect({ tables: exceptDeleteTables, rect, setIsCollision });
    }
  }, [tables, rectRef.current]);

  useEffect(() => {
    const table = tables.find((value) => value.id === id);
    if (table) {
      handleChangeShapeStats({
        ...table,
        isCollision: collision
      });
      return;
    }
  }, [collision]);

This logic checks for collisions between tables, and in complex scenarios with multiple collisions, the algorithm doesn't always function correctly.

This is just one example. Most of the UI operates in this manner.

I'm seeking advice or examples from other developers who are using Konva in their projects. Any insights or recommendations would be greatly appreciated.

[lavrton]

From the description, it sounds like you need to work on React performance and not Konva performance. The scope of React optimization is too large to give any advice with the provided information.