Grid refreshes on every React state change

[Spyros]

Hello, I'm having an issue with using Syncfusion Grid in my React application. When I have a page that includes a Grid, any change in React state within that page results in a refresh of the Grid. This results in unnecessary requests in cases where the Grid's data are in a remote server with all the consequences that come from that. I have been looking for a way to stop that behavior but have found no reasonable way to do so, except from some very tricky workarounds.

I have created a test project based on some of the example projects you distribute. You can find it in this post's attachments. It includes a Grid that fetches remote data. Under the Grid there is a paragraph tag that shows the value of a state variable. Below that, you can find a button that increases the state variable's value by 1. This counter is not affiliated with the Grid in any way, and because of that the expected behavior is to not affect it at all.

Although what happens is that when the button is clicked and the counter increases, that React state change makes the Grid refresh. You can see that by the loading icon that shows on top of the Grid while it's fetching the remote data, but it's clearer if you go to the network tab of your browser, where you can see the individual requests that are sent to the server that holds the data in every React state change. And there are two of them for every press of the button, I assume one is for when the variable's value increases and the next one is for when the content of the paragraph tag is updated to show the current value, but I'm not certain about that.

Is there any way to avoid that behavior that I'm missing? If not, this seems like a bug to me, I don't understand why a state change that has nothing to do with the Grid itself triggers a Grid refresh.

Thank you in advance.

Best regards!

Attachment: Gridreloadonstatechangeissue_a67e82e8.zip

[Rajapandi Ravi]

Hi Spyros, 

 

Greetings from syncfusion support 

 

You can achieve your requirement by using memo. React.memo() is similar to PureComponent in that it will help us control when our components rerender. Please refer the below code example and sample for more information. 

App.tsx 

 

import * as React from 'react'; 

import { useCallback, useState } from 'react'; 

import ComponentA from './Component1'; 

 

function App() { 

    const [count, setCount] = useState(0); 

    const increaseCount = useCallback(() => { 

        setCount(count + 1); 

    }, [count]); 

 

    return ( 

        <div> 

            <ComponentA /> 

            <p>Count: {count}</p> 

            <input type='button' onClick={increaseCount} value='Increase Count' /> 

        </div> 

    ) 

} 

 

export default App; 

 

 

 

Component1.tsx 

 

import * as React from 'react'; 

import { memo } from 'react'; 

import { DataManager } from '@syncfusion/ej2-data'; 

import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; 

import { Filter, Group, Inject, Page, PageSettingsModel, Sort, SortSettingsModel } from '@syncfusion/ej2-react-grids'; 

 

const ComponentA = () => { 

 

    const pageSettings: PageSettingsModel = { pageSize: 6 }; 

    const sortSettings: SortSettingsModel = { 

        columns: [ 

            { field: 'EmployeeID', direction: 'Ascending' } 

        ] 

    }; 

 

    const data = new DataManager({ 

        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/' 

    }); 

    return( 

        <div> 

          <p>Grid using Functional Components</p> 

            <GridComponent dataSource={data} allowPaging={true} pageSettings={pageSettings} 

                allowSorting={true} sortSettings={sortSettings}> 

                <ColumnsDirective> 

                    <ColumnDirective field='OrderID' width='100' textAlign="Right" /> 

                    <ColumnDirective field='CustomerID' width='100' /> 

                    <ColumnDirective field='EmployeeID' width='100' textAlign="Right" /> 

                    <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" /> 

                    <ColumnDirective field='ShipCountry' width='100' /> 

                </ColumnsDirective> 

                <Inject services={[Page, Sort, Filter, Group]} /> 

            </GridComponent> 

            <br /> 

        </div> 

    ) 

} 

 

export default memo(ComponentA); //it helps to prevent the Grid from refresh 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165601/ze/GRID-R~147950702.zip 

 

Regards,
Rajapandi R 

[Spyros]

Thank you for your reply. I have not yet had the chance to implement it to my application, but the provided sample application works great!

Have a great day!

Best regards,

Spyros

[Rajapandi Ravi]

Hi Spyros, 

We are happy to hear that the provided solution is working fine at your end.  

 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R