[Solved] How can I optimize TaskBoard performance?

[Islam]

Hello.

After adding 150-200 cards UI starts to lag.

What are the best practices to optimize KendoReact TaskBoard performance with a large number (e.g. 500+) of cards?

Thanks. 

[Filip]

Hello, Islam,

When working with a large number of cards (e.g. 150–500+) in the KendoReact TaskBoard, UI performance can be affected due to the high rendering workload. Here are best practices and approaches tailored for optimizing TaskBoard performance:

• Chunk Loading - Since TaskBoard does not offer built-in paging, consider splitting your data and rendering only a subset of cards per column at a time. For example, display the first 50 cards and provide a “Load More” button to fetch additional cards.

• Minimizing re-renders:  Use React’s memoization tools such as React.memo, useMemo, and useCallback for your card and column components. This helps prevent unnecessary re-renders when the data or props have not changed. Make sure that only the affected card or column is updated when changes occur, rather than re-rendering the entire TaskBoard.

I have prepared a runnable example which showcases one possible optimization approach based on client-side lazy rendering (windowing), where all tasks are kept in memory but only a limited subset per column is rendered at any given time to reduce DOM size and improve TaskBoard performance:

• https://stackblitz.com/edit/react-fzz3ww2s-qseujlfu?file=app%2Fapp.tsx
  

However, this approach may require some adjustments to better align with your current implementation. If you are still experiencing performance issues, can you please modify the example above so that it closely matches your setup and reproduces the problem? This will allow me to debug it locally and evaluate alternative optimization strategies.

Regards,
Filip
Progress Telerik