Hi Team,
I have rendered the Kendo react grid component with template in below cases.
- Template declared as nested react component (child1) of grid (parent1)
- Template declared as react component (child2) outside of grid (parent2)
As per the react behavior, first case will remount for each state update and second case will not remount.
In Kendo, first case is working properly as per react behavior. But for second case the Kendo component is having re-mounting issues while state update of template.
I have attached a sample for reference below.
Kindly share suggestion to avoid full remounting of template while state updates.
Regards,
SuriyaKumar
1 Answer, 1 is accepted
Hello, Suriya,
Thank you for the provided example.
`Child2` is re-rendering because an inline function is used as a GridColumn cell component. This function changes on every re-render and therefore causes `Child2` to be re-rendered.
cell={() => <Child2 mid={mid}/>}Setting the cell to the component directly `cell={Child2}` fixes the issue. However, since you need to pass the `mid` prop and this will require using an inline function, I would suggest using the `useCallback` hook instead of `useEffect`.
For convenience, I prepared a StackBlitz example based on the provided code where I am using the `useCallback` hook with the `mid` prop in its dependency array:
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik