kendoreact grid selection performance

Hello, Venelin,

Thank you for all of the details.

In general, even if the render is called multiple times due to the React virtual DOM the updates should be very minimal.

Still, we have made an example with React.useMemo for the rowRender to optimize it. Depending on the functionalities of the Grid, please make sure to pass the correct parameters to the useMemo function, to not stop necessary updates:

https://stackblitz.com/edit/react-qed7me-warzeh?file=app/main.jsx

If this is still not an option, the selection can be made directly using DOM operations to update the classList of a single DOM element instead of re-render. This is not the "React way", but it can improve the performance in this specific use case.

I hope this will prove helpful.

Regards,
Stefan
Progress Telerik

Hi.

I'm solving the same problem as Venelin. And I'm confused.  Because when I tried to solve the problem locally, nothing improved. I'm looking at your example of stackblitz. Imho, map is mutable change - data is always different. When I look in the console, your example also shows that x renders happen there, after clicking on a row. The second click on the next line has exactly 2x more line renders. Am I doing anything wrong? Because I have a real problem, just about 100 lines and click on the line in the grid and the delay is noticeable. And I don't like the no-react solution. Well thank you.

Hello, Igor,

I assume someone made a change to an example accidentally.

The memo should be updated only based on a specific value, for example, the ID was changed or the selected value.

  const CurrentRow = React.useMemo(() => {
    console.log('>>row render');
    return  React.cloneElement(row, { ...others, onClick: onClick, onDoubleClick:onDoubleClick}, row.props.children);
  }, [others.dataItem.selected]);

https://stackblitz.com/edit/react-qed7me-warzeh?file=app/main.jsx

This should update only the changed rows.

Also, we have an official improvement already on a pull request, that resolves this automatically. We expect it to be live in the next couple of weeks.

Regards,
Stefan
Progress Telerik

Thank you Stefan.

Your edit helped.

But the console also shows a lot of warnings in your example. So do me locally. I can't handle it.

Thanks.

I'm not sure.  Maybe I solved it.

I think the props in the <CustomComponent /> component should not be {... props}, but {... row.props}. And the specific value for useMemo hook needs to be sent differently.

Hello, Igor,

Yes, the warning is because we are setting all props to the TR element and they are invalid attributes.

This requires setting only the required props to the TR.

If there are any issues, please let me know and I will be happy to assist.

Regards,
Stefan
Progress Telerik