AG-Grid-React-Series-#34-Immutable-Data-and-Delta-Updates

Unlocking Performance with Immutable Data and Delta Updates in AG-Grid React

In the world of rich, interactive data grids, performance is paramount. When dealing with large datasets and frequent updates, inefficient rendering or data processing can quickly degrade user experience. This is where the powerful combination of immutable data patterns and delta updates becomes a game-changer, especially when working with AG-Grid in a React application.

This post, part of our AG-Grid React series, delves into how adopting immutable data structures and leveraging AG-Grid's delta update mechanisms can lead to significantly faster, more predictable, and easier-to-debug applications.

The Power of Immutable Data in React

Immutable data means that once a piece of data is created, it cannot be changed. Instead of modifying existing data, you create a new copy with the desired changes. While this might sound like extra overhead, it offers profound benefits in React:

• Predictability: Data flow becomes easier to understand, as data always flows downwards and never changes unexpectedly.
• Easier Debugging: Bugs related to data mutation side effects are eliminated. You can easily track changes by comparing object references.
• Performance Optimizations: React's reconciliation process (and libraries like AG-Grid) can perform shallow comparisons to determine if components need to re-render. If a reference to an object hasn't changed, React knows its children don't need re-rendering.

Creating Immutable Updates

In JavaScript, you can achieve immutability using various techniques:

• Spread Syntax (`...`): Excellent for creating new arrays or objects from existing ones.
• Array Methods: `map()`, `filter()`, `reduce()` all return new arrays, leaving the original untouched.
• Libraries: While not strictly necessary for most cases, libraries like Immer can simplify complex immutable updates.

Here's a quick example of updating an item in an array immutably:

const originalData = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

// Immutable update: change name of item with id 1
const updatedData = originalData.map(item =>
  item.id === 1 ? { ...item, name: 'Alicia' } : item
);

console.log(originalData); // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] (unchanged)
console.log(updatedData);   // [{ id: 1, name: 'Alicia' }, { id: 2, name: 'Bob' }] (new array with updated item)
        

AG-Grid and Immutable Data: The Role of `getRowNodeId`

AG-Grid, being a highly optimized data grid, understands the value of stable row identities. When you provide AG-Grid with immutable data, it needs a way to track rows across updates. This is precisely the purpose of the getRowNodeId callback.

By implementing getRowNodeId, you tell AG-Grid how to uniquely identify each row. This allows the grid to efficiently detect which rows have been added, removed, or updated, rather than re-rendering the entire grid or all rows when a new dataset is provided.

import React, { useState, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MyGridComponent = () => {
    const gridRef = useRef();
    const [rowData, setRowData] = useState([
        { id: 'a1', name: 'Alice', age: 30 },
        { id: 'b2', name: 'Bob', age: 24 },
        { id: 'c3', name: 'Charlie', age: 35 },
    ]);

    const [columnDefs] = useState([
        { field: 'id', headerName: 'ID', width: 80 },
        { field: 'name', headerName: 'Name', editable: true },
        { field: 'age', headerName: 'Age', type: 'numericColumn', editable: true },
    ]);

    // Crucial for row tracking and delta updates!
    const getRowNodeId = useCallback((data) => data.id, []);

    return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
            <AgGridReact
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                getRowNodeId={getRowNodeId} // <-- This is key!
            />
        </div>
    );
};

export default MyGridComponent;
        

Achieving Delta Updates with `api.applyTransaction`

While getRowNodeId helps AG-Grid track rows when you provide a full new rowData array (e.g., via setRowData), the most efficient way to apply changes is by sending only the "delta" — the specific rows that have been added, updated, or removed.

AG-Grid provides the gridApi.applyTransaction method (or gridApi.applyTransactionAsync for asynchronous updates) specifically for this purpose. This method takes an object with add, remove, and update arrays, each containing the row data objects relevant to that operation.

Using applyTransaction offers significant advantages, especially for large datasets:

• Minimal DOM Manipulation: AG-Grid only updates the specific row components affected by the transaction, avoiding unnecessary re-renders of the entire grid.
• Reduced Data Transfer: You only send the changed data to the grid, not the entire dataset.
• Improved Responsiveness: The UI feels snappier, as updates are applied with surgical precision.

When using applyTransaction, it's crucial that:

1. Your getRowNodeId is correctly implemented.
2. The objects you pass in add, remove, and update have the unique IDs that getRowNodeId expects.
3. For update, the object must have the same ID as an existing row.
4. For remove, the object needs to have at least the ID property to identify the row to be removed.

Practical Implementation: Adding, Updating, and Deleting Rows

Let's expand our example component to demonstrate how to manage immutable state in React and then use api.applyTransaction to update AG-Grid.

import React, { useState, useRef, useCallback, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridWithImmutableAndDeltaUpdates = () => {
    const gridRef = useRef();
    const nextId = useRef(4); // To generate unique IDs for new rows

    // Initial state with immutable data
    const [rowData, setRowData] = useState([
        { id: 'a1', name: 'Alice', age: 30, city: 'New York' },
        { id: 'b2', name: 'Bob', age: 24, city: 'London' },
        { id: 'c3', name: 'Charlie', age: 35, city: 'Paris' },
    ]);

    const [columnDefs] = useState([
        { field: 'id', headerName: 'ID', width: 80 },
        { field: 'name', headerName: 'Name', editable: true },
        { field: 'age', headerName: 'Age', type: 'numericColumn', editable: true },
        { field: 'city', headerName: 'City', editable: true },
    ]);

    // Use useCallback for getRowNodeId to prevent unnecessary re-renders
    const getRowNodeId = useCallback((data) => data.id, []);

    // Function to add a new row
    const addRow = useCallback(() => {
        const newRowId = `id${nextId.current++}`;
        const newRow = { id: newRowId, name: 'New User', age: 20, city: 'Unknown' };

        // 1. Update React state immutably
        setRowData(prevData => [...prevData, newRow]);

        // 2. Apply transaction to AG-Grid
        gridRef.current.api.applyTransaction({ add: [newRow] });
    }, []);

    // Function to update the first row's name and age
    const updateFirstRow = useCallback(() => {
        const firstRow = rowData[0];
        if (!firstRow) return;

        const updatedRow = { ...firstRow, name: 'Updated ' + firstRow.name, age: firstRow.age + 1 };

        // 1. Update React state immutably
        setRowData(prevData =>
            prevData.map(row => (row.id === updatedRow.id ? updatedRow : row))
        );

        // 2. Apply transaction to AG-Grid
        gridRef.current.api.applyTransaction({ update: [updatedRow] });
    }, [rowData]);

    // Function to delete the last row
    const deleteLastRow = useCallback(() => {
        const lastRow = rowData[rowData.length - 1];
        if (!lastRow) return;

        // 1. Update React state immutably
        setRowData(prevData => prevData.filter(row => row.id !== lastRow.id));

        // 2. Apply transaction to AG-Grid
        gridRef.current.api.applyTransaction({ remove: [lastRow] });
    }, [rowData]);

    // Handle cell value changes directly in the grid
    const onCellValueChanged = useCallback((event) => {
        const { data, colDef } = event;
        const field = colDef.field;
        const newValue = event.newValue;

        // Create an immutable copy of the updated row
        const updatedRow = { ...data, [field]: newValue };

        // 1. Update React state immutably
        setRowData(prevData =>
            prevData.map(row => (row.id === updatedRow.id ? updatedRow : row))
        );

        // AG-Grid handles its own internal update for onCellValueChanged,
        // but if you were doing this from an external source, you'd apply a transaction here.
        // For cell edits, the grid often updates its internal model already.
        // If you were updating from an external source (e.g., websocket), you would do:
        // gridRef.current.api.applyTransaction({ update: [updatedRow] });
        // The current 'onCellValueChanged' doesn't strictly *need* an applyTransaction
        // because the grid already knows which cell was edited.
        // We are updating the React state to keep it in sync with the grid's internal state.
    }, []);

    const defaultColDef = useMemo(() => ({
        flex: 1,
        minWidth: 100,
        resizable: true,
    }), []);

    return (
        <div style={{ height: 600, width: '100%' }} className="ag-theme-alpine">
            <div style={{ marginBottom: 10 }}>
                <button onClick={addRow} style={{ marginRight: 5 }}>Add New Row</button>
                <button onClick={updateFirstRow} style={{ marginRight: 5 }}>Update First Row</button>
                <button onClick={deleteLastRow}>Delete Last Row</button>
            </div>
            <AgGridReact
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                getRowNodeId={getRowNodeId}
                onCellValueChanged={onCellValueChanged}
                readOnlyEdit={true} // For demonstration, AG-Grid handles edits by default
            />
        </div>
    );
};

export default GridWithImmutableAndDeltaUpdates;
        

In the example above, notice the pattern:

1. Immutable State Update: When a change occurs (add, update, delete), we first update the React component's rowData state immutably using `setRowData`. This ensures React's shallow comparison works correctly and your component always renders based on a fresh state reference.
2. Delta Update to AG-Grid: Immediately after updating the React state, we call gridRef.current.api.applyTransaction, passing only the specific row(s) that were affected. This tells AG-Grid precisely what changed, allowing it to perform highly optimized DOM updates.

For cell edits, AG-Grid often manages its internal state updates, but keeping your React state synchronized (as shown in onCellValueChanged) is a good practice, especially if your rowData is the single source of truth for other parts of your application. If updates come from an external source (like a WebSocket), you would definitely use applyTransaction to push those changes to the grid.

Performance Benefits and Best Practices

By combining immutable data with AG-Grid's delta update capabilities, you achieve a highly performant and maintainable data grid experience:

• Optimal Render Performance: Both React and AG-Grid benefit from stable object references and explicit change notifications.
• Reduced Memory Footprint: By only sending small delta objects, you minimize the data copied and processed.
• Easier Integration: This pattern integrates naturally with state management libraries that promote immutability (e.g., Redux).
• Predictable Behavior: Debugging complex data flows becomes simpler.

Best Practices:

• Always implement getRowNodeId if your rows have unique identifiers.
• Use api.applyTransaction for frequent, granular updates (adds, removes, single-row updates).
• Use setRowData when you're replacing the entire dataset (e.g., on initial load or a complete data refresh). Even then, with getRowNodeId, AG-Grid will perform intelligent updates.
• Keep your React state synchronized with the grid's data, ensuring your component's source of truth reflects the current grid state.
• Consider using useCallback and useMemo for functions and objects passed to AG-Grid props to prevent unnecessary re-renders of the grid component itself.

Conclusion

Mastering immutable data patterns and understanding how to leverage AG-Grid's getRowNodeId and api.applyTransaction methods are crucial for building high-performance React applications with AG-Grid. This approach ensures that your grid remains responsive and efficient, even when managing dynamic and extensive datasets. By explicitly communicating changes to the grid and maintaining a clean, immutable state, you lay the foundation for robust and scalable data experiences.