How to Update Data Without Rerendering an Entire Grid in Angular
Tags: angular, javascript, webdev, productivity
Published: 2021-09-01 13:21:36

---
title: How to Update Data Without Rerendering an Entire Grid in Angular
published: true
date: 2021-09-01 11:57:05 UTC
tags: angular, javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/how-to-update-data-without-rerendering-an-entire-grid-in-angular.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42cz0e61ptzexuc17pl5.png
---

Rerendering an entire Angular grid to updating a single record is very inefficient, and at times it can cause glitches due to the memory consumed. The best way to handle this is to find a way to rerender just that particular record.

With immutable mode in our Syncfusion [Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid "Link to Angular Data Grid"), you can easily update records without rerendering the entire grid component.

The Angular Data Grid is a control for displaying data in a tabular format. Its rich feature set includes data binding, editing, Excel-like filtering, custom sorting, grouping, freezing rows and columns, and more. It also allows you to export data to Excel, CSV, and PDF formats.

In this blog post, we are going to discuss the use of immutable rendering mode and how to enable it in the Syncfusion Angular Data Grid component, to avoid rerendering the entire Data Grid.

## Default Rendering Mode

Before we dive into the immutable mode, let’s learn the data flow when an action is performed in the Data Grid in default mode.

The following image illustrates the default flow when updating data in the Data Grid.

![Flowchart for Default Rerendering in Angular Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Flowchart-for-Default-Rerendering-in-Angular-Data-Grid.png)<figcaption>Flowchart for Default Rerendering in Angular Data Grid</figcaption>

By default, the Angular Data Grid will rerender all the table row elements when you perform any action, like sorting or filtering. Even if you make a single value change in the data source and invoke the refresh method, then it will rerender the entire table. The Data Grid isn’t aware of the value changes with the current refresh.

## How Immutable Mode Works and Why Do We Need It?

In immutable mode, while performing grid actions, the Angular Data Grid will only rerender the modified or newly added rows. This prevents the rerendering of the unchanged rows.

When you perform any action, the Data Grid will compare the current JSON result with the previous result using the primary key.

Immutable rendering mode optimizes the Angular Data Grid rerendering performance by using the object reference and deep compare method based on the [object diff concept](https://java-object-diff.readthedocs.io/en/latest/ "Link to the JavaScipt Object diff documentation") as the grid supports nested objects. Then, it rerenders just the unmatched data in the DOM. So obviously, we can reduce the DOM manipulation and enhance the rendering performance in this mode.

![Flowchart for Immutable Rerendering in Angular Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Flowchart-for-Immutable-Rendering-in-Angular-Data-Grid-1.png)<figcaption>Flowchart for Immutable Rerendering in Angular Data Grid</figcaption>

The immutable mode smartly decides which element needs to be changed while rerendering.

Let’s check out some examples for the object diff concept.

### Scenario 1

```js
//initially bound data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'UK' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];

//updated data. 
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'Swizerland' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'France' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];
```

In the scenario 1 data, we changed the ShipCountry column in the second and third rows. When you update this data in the grid, it will compare it with the previous data, detect the changes, and update the second and third rows alone.

### **Scenario 2**

```js
//initially bound data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'UK' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];

//updated data. 
let data = [{ OrderID: 5, CustomerID: 'Robert', Freight: 61, ShipCountry: 'Spain' },
{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];
```

In the scenario 2 data, we added a row at the top and removed the third row. In this case, the grid will detect the changes, and add a new row (tr) at the top, and reposition the other rows. Then, it will remove the deleted row based on the primary key.

**Note:** You can also simulate the same scenario in the Angular Data Grid UI using the add and delete row features.

Finally, let’s check out the performance of immutable versus normal rerendering mode in various grid actions.

![Performance metrics of immutable vs normal re-rendering mode](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Performance-metrics-of-immutable-vs-normal-re-rendering-mode.gif)From the previous GIF image, it’s clear that the immutable rendering mode performs well when compared with the normal rendering mode in the Angular Data Grid.

## How to Enable Immutable Mode in the Syncfusion Angular Data Grid

Follow these steps to enable immutable rendering mode in the Angular Data Grid to effectively update data in your application.

### Step 1: Set up Angular Data Grid

Refer to the [Getting started with Angular Data Grid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started/ "Link to getting started with Angular Grid component documentation") documentation to set up the Angular environment and add the Data Grid component to your application.

### Step 2: Enable immutable rendering mode in the Angular Data Grid

After adding the Data Grid in your app, enable the [enableImmutableMode](https://ej2.syncfusion.com/angular/documentation/grid/immutable-mode/ "Link to the immutable Mode in Angular Grid component documentation") property by setting it to true.

Refer to the following code example.

```html
<ejs-grid [dataSource]='OrderData' [allowPaging]='true' [enableImmutableMode]='true'>
  <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column>
      <e-column field='ProductName' headerText='Product Name' width='100'></e-column>
      <e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
  </e-columns>
</ejs-grid>
```

**Note:** The immutable mode feature uses the primary key value for data comparison. So, we should provide value to the [isPrimaryKey](https://ej2.syncfusion.com/angular/documentation/api/grid/column/#isprimarykey "Link to the isPrimaryKey property of Angular DataGrid") column.

## GitHub reference

For more information, refer to the [Immutable Rendering Mode demos](https://github.com/jvhariharan/Immutable-Data "Link to the Immutable Rendering Mode in Angular DataGrid demos on GitHub").

## Conclusion

Thanks for reading! I hope you now have a clear idea of the immutable rendering mode and how to enable it in the Syncfusion [Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid "Link to Angular Data Grid"). This feature will reduce the rerendering time and DOM manipulations. Try out the steps given in this blog post and enhance your app’s performance!

The immutable mode feature is also available in our ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid "Link to ASP.NET Core Data Grid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid "Link to ASP.NET MVC Data Grid")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "Link to JavaScript Data Grid"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-grid "Link to Angular Data Grid"), [React](https://www.syncfusion.com/react-ui-components/react-data-grid "Link to React Data Grid"), and [Vue](https://www.syncfusion.com/vue-ui-components/vue-grid "Link to Vue Data Grid") Data Grids.

For existing customers, the new version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Link to Syncfusion Feedback Portal"). We are here to help you succeed!

## Related blogs

- [Load and View PDF Files in an Angular App](https://dev.to/syncfusion/how-to-load-and-view-pdf-files-in-an-angular-app-bjb "Link to How to Load and View PDF Files in an Angular App blog")
- [Enable Lazy-Load Grouping in Syncfusion Angular Data Grid](https://dev.to/syncfusion/how-to-enable-lazy-load-grouping-in-syncfusion-angular-data-grid-383 "Link to How to Enable Lazy-Load Grouping in Syncfusion Angular Data Grid blog")
- [View and Edit Word Documents in Angular Apps: Beginners’ Guide](https://dev.to/syncfusion/view-and-edit-word-documents-in-angular-apps-beginners-guide-46j5 "Link to View and Edit Word Documents in Angular Apps: Beginners’ Guide blog")
- [Load a Million+ Records in Less Than a Second in Syncfusion Angular Data Grid](https://dev.to/syncfusion/how-to-load-a-million-records-in-less-than-a-second-in-syncfusion-angular-data-grid-3kb4 "Link to How to Load a Million+ Records in Less Than a Second in Syncfusion Angular Data Grid blog")