Offline mode with React DataManager

20 Feb 20269 minutes to read

In React applications, remote data binding with DataManager typically sends a request to the server each time the executeQuery method is invoked. This repeated communication can increase latency and place additional load on the server.

To improve efficiency, DataManager provides an offline property. When enabled, all data is loaded during initialization, and subsequent query processing is handled on the client side. This eliminates unnecessary server calls, resulting in faster response times and reduced server overhead.

To enable offline mode in DataManager, set the offline property to true during initialization. This is demonstrated in the below code example.

app.jsx

import { getValue } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { Row } from './rowTemplate';
const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [] };
    }
    componentDidMount() {
        const dataManager = new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor(), offline: true }, new Query().take(8));
        dataManager.ready.then((e) => {
            const res = e.result.map((row) => <Row key={row.OrderID} {...row} />);
            this.setState({
                items: res,
            });
        });
    }
    render() {
        return (<table id='datatable' className='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{getValue('items', this.state)}</tbody>
            </table>
        );
    }
}

app.tsx

import { getValue } from '@syncfusion/ej2-base';
 import { DataManager, ODataV4Adaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
 import * as React from 'react';
 import { IOrders } from './orders';
 import { Row } from './rowTemplate';

 const SERVICE_URI: string = 'https:services.odata.org/V4/Northwind/Northwind.svc/Orders/';

 export default class App extends React.Component<{}, {}>{
    constructor(props: object) {
        super(props);
        this.state = { items: [] };
    }
    componentDidMount() {
        const dataManager: DataManager = new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor(), offline: true }, new Query().take(8));
        dataManager.ready.then((e: ReturnOption) => {
            const res = (e.result as IOrders[]).map((row: IOrders, index: number) => (
                <Row key={row.OrderID} {...row} />
            ));
            this.setState({
                items: res
            });
        });
    }

    public render() {
        return (
            <table id='datatable' className='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{ getValue('items', this.state) }</tbody>
            </table>
        )
    }

 }

orders.tsx

export interface IOrders {
    OrderID: number; 
    EmployeeID: number; 
    CustomerID: string; 
    Order_Details: object[]; 
}

rowtemplate.jsx

import * as React from 'react';
export class Row extends React.Component {
    render() {
        const item = this.props;
        return (
            <tr>
                <td>{item.OrderID}</td>
                <td>{item.CustomerID}</td>
                <td>{item.EmployeeID}</td>
            </tr>
        );
    }
}

rowtemplate.tsx

import * as React from 'react';
import { IOrders } from './orders';

export class Row extends React.Component<{}, {}>{
    public render() {
        const item: IOrders = this.props as IOrders; 
        return (
            <tr>
                <td>{item.OrderID}</td>
                <td>{item.CustomerID}</td>
                <td>{item.EmployeeID}</td>
            </tr>
        )
    }
}

The loaded data will be cached in the json property of DataManager.

When to use Offline mode

Offline mode is most effective when:

• The dataset is moderately sized and can be loaded during initialization.
• Data does not change frequently, reducing the risk of stale results.
• Client-side query processing provides a performance advantage.

When to avoid Offline mode

Offline mode should be avoided in scenarios such as:

• Large datasets: Loading all records at once may cause performance issues in the browser.
• Frequently changing data: Cached data may become outdated quickly.
• Real-time requirements: Applications that depend on live or streaming data need server-side queries.
• Sensitive data: Storing all records on the client side may expose information unnecessarily.