We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

rowDeselect and rowSelect event is getting triggered continiously when doing a state variable change in Syncfusion React Grid


I have a use case where I need to update a few state variables on Row selection and deselection.

have added rowSelected={} and rowDeselected={} event. And using the column type checkbox also simple row selection is also enabled.

<ColumnDirective type='checkbox' allowSorting={false} allowFiltering={false}  width='60'></ColumnDirective>

When selecting a row state variable is getting updated but a continuous rowSelect and rowDeselect event is getting triggered, and the handler code is being executed an infinite number of times. 

How can I fix this? I just want to call the handler once and update the state variable.


8 Replies

JC Joseph Christ Nithin Issack Syncfusion Team March 7, 2023 12:07 PM UTC

Hi Animesh,

  Greetings from Syncfusion support.

  Before proceeding to your query, we want you to share the below details so that we will be able to provide a better solution ASAP.

  • Explain the issue you are facing in detail.
  • Complete grid rendering code.
  • Video demo of the issue you are facing.
  • Syncfusion package version.


Joseph I.

AD Animesh Dutta March 8, 2023 06:13 AM UTC

Hi Joseph, please find the code and the output in the below file.

The versions and the issue is shown in the attached files. When the rowSelected event is being called and we are setting some state variable, the rowDeselected event is getting called somehow. That is the problem.

we have a conditional rendering based on the state variable value. can't achieve the expected behavior with the code shown.

Need help asap.


Attachment: sample_4c78c5d7.zip

AD Animesh Dutta March 16, 2023 10:32 AM UTC

Team, is there any update on this issue? 3

Waiting for the response for so long.


JC Joseph Christ Nithin Issack Syncfusion Team March 21, 2023 07:30 AM UTC


   Based on the video provided, we could see that you are updating the state variables in the row selected and the deselected events. When you update the state variable, by default React will re-render all the child components.
And we could also see that you are defining the templates for some of the columns but we were not able to see how you have defined the templates in your component. Kindly share the below details so that we will be able to provide a better solution ASAP.

  • Code details of the template columns.
  • Simple sample to replicate the issue.
  • Syncfusion Package version you are using.

AD Animesh Dutta March 21, 2023 09:50 AM UTC

Hi Find the template code below - 

Find the Syncfusion version here -

The working demo of the problem was shared before. Please check that,

I can understand it is happening because of the state update. But how can we prevent that that's the question? It will be great if we can get a solution asap.


SI Santhosh Iruthayaraj Syncfusion Team March 23, 2023 03:20 PM UTC

Hi Animesh,

As we have previously mentioned, when the state variable is updated, React will re-render all child components, and thus, the selected records will be deselected, triggering the rowDeselected event. Although, from the sample video you provided, we can understand that you want the selected records count in the state variable, to address your concern, we suggest using the recordClick event instead of rowSelected and rowDeselected events. By doing so, you can update the state variable with the selected record's count using the getSelectedRowIndexes method of the Grid. We have prepared a code snippet for your reference.



    let gridInstance;

    const [selectedRecords, setSelectedRecords] = useState(0);


    function recordClick() {

        setTimeout(() => {




    <GridComponent dataSource={data} ref={g => gridInstance = g} allowPaging={true} pageSettings={{      pageCount: 5 }} recordClick={recordClick} selectionSettings={selectionSettings}>

You can also check out our sample on StackBlitz to see this implementation in action.

Sample: https://stackblitz.com/edit/react-undh6y?file=index.js

We hope this solution resolves your issue. Please feel free to reach out if you have any further questions.


Santhosh I

AD Animesh Dutta March 24, 2023 12:17 PM UTC

Hi Team, thanks for the solution. It's working fine after using recordClick event.

Thank you

SG Suganya Gopinath Syncfusion Team March 26, 2023 03:20 PM UTC

Hi Animesh,

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance. 

Live Chat Icon For mobile
Up arrow icon