React Data GridValue Cache

react logo

The Value Cache is for advanced users who have time-consuming Value Getters and want to reduce the number of times Value Getters get executed.

Each time the grid requires a value from a Value Getter, the Value Getter is executed. For most use cases, this will not be an issue, as Value Getters will execute quickly and not have any noticeable performance implications for your application. However sometimes you might implement time-intensive tasks in your Value Getters. If this is the case, then you can opt to turn on the Value Cache to store the results of the value getters.

If you are not using Value Getters, or you don't have performance problems, then you do not need the Value Cache.

When the Calue Cache is turned on, each time a Value Getter is executed, its result is stored in the Value Cache. If the data in the grid has not changed since the last time the value getter was used, then the value is retrieved from the cache instead of executing the Value Getter again.

One client of AG Grid had 1,000 rows and 20 columns in a grid. A lot of the columns were doing advanced maths, using third-party maths API in the valueGetter for 8 of the columns. The client was also grouping and the summing by the columns containing the value getters. This meant, if more rows were added, the grid recomputed the aggregations, resulting in all the value getters getting called again, causing the grid to stall for around 1,000ms as rows were added.

Introducing the value cache meant the value getters were executed once when the initial data was loaded, so the 1,000ms happened once. Then when delta changes came in, the value getters were only executed on the new records, giving an almost seamless experience to the user.

Below shows a grid demonstrating the Value Cache. The column on the right has a Value Getter that has a console.log() statement. This will allow us to see exactly when the Value Getter is called. So it is best to open this example in a new tab and open up the development console. From the example, the following can be noted:

  • When the grid is initially loaded, the value getter is called over 100 times. This is for the following reasons:
    • The aggregation requires each value for the group total.
    • The DOM requires each value that is displayed (because of scrolling, not all are displayed)
  • As you scroll up and down the grid, the value getters are executed, as the DOM needs values for rendering.
  • As you open and close groups, the value getters are executed, as the DOM needs values for rendering.
  • Now turn the value cache on by selecting the radio button at the top. The grid gets reset and then works with the value cache on. Notice in the console that the value getter gets executed exactly 100 times, once for each row. Even through the value getter result is used in two places (aggregation and rendering the row), the value getter is only called once. Even scrolling and opening / closing the groups does not result in the value getter getting executed again.

Note that the example still works fast when the Value Cache is turned off. This emphasises you don't need to turn the Value Cache on if your application is not getting slowed down by your Value Getters.

Value Cache Properties

The following are the grid properties related to the Value Cache.