How to prevent grid refresh in react state change

[Venkatesh Babu S N]

How to prevent grid refresh in react state change

[Balaji Sekar]

Hi Venkatesh, 

Greetings from the Syncfusion support. 

By default the React components are automatically re-rendered based on the state value change. But we can prevent this behaviour by overriding the shouldComponentUpdate method. Please refer the below documentation for more information. 

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/how-to/prevent-the-grid-refresh-in-react-state-change/ 

Please get back to us, if you need further assistance.  

Regards, 

Balaji Sekar 

[Tomasz Bednarek]

Hello Syncfusion!

The answer is fine, but what about a grid used in a function component and connected to a remote enpoint? I wouldn't be worried about client-side rerenders, but each time the grid is querying remote data. Any advice on this?

Kind Regards

Tomasz Bednarek

[Santhosh Iruthayaraj]

Hi Tomasz,

Based on your request, you can prevent the unnecessary re-renders by wrapping the Grid component with “React.memo()” higher-order component. Please find the below code snippet for implementation.

 

import React from 'react';

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

 

const MyGridComponent = React.memo(({ data }) => {

  return (

    <GridComponent dataSource={data}>

      <ColumnsDirective>

        {/* Define your grid columns here */}

        <ColumnDirective field="id" headerText="ID" width="100" />

        <ColumnDirective field="name" headerText="Name" width="150" />

        {/* Add more columns as needed */}

      </ColumnsDirective>

    </GridComponent>

  );

});

 

export default MyGridComponent;

 

In this example, MyGridComponent is wrapped with React.memo(), which will prevent rerendering if the data prop remains the same. The grid will only update when the data prop changes.

Please let us know if you have any further queries.

Regards,

Santhosh I