Load on-demand in React Chat UI component

28 Aug 20254 minutes to read

Load on-demand functionality allows messages to be loaded dynamically when users scroll to the top of the message list. This feature significantly improves application performance and reduces initial load times, especially beneficial for conversations with extensive message history. Instead of loading the entire conversation at once, messages are fetched progressively as needed, ensuring optimal user experience and resource utilization.

Enabling load on-demand

Use the loadOnDemand property to enable dynamic message loading. When enabled, the component triggers a loading event when the user scrolls to the top of the message list, allowing implementation of custom data fetching logic.

import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    let chatMessages = [];
    for (let i = 1; i <= 150; i++) {
        chatMessages.push({
            text: i % 2 === 0 
                ? `Message ${i} from Michale` 
                : `Message ${i} from Albert`,
            author: i % 2 === 0 ? michaleUserModel : currentUserModel
        });
    }
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent loadOnDemand={true} user={currentUserModel} messages={chatMessages}></ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { ChatUIComponent, UserModel, MessageModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel: UserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    let chatMessages: MessageModel [] = [];
    for (let i = 1; i <= 150; i++) {
        chatMessages.push({
            text: i % 2 === 0 
                ? `Message ${i} from Michale` 
                : `Message ${i} from Albert`,
            author: i % 2 === 0 ? michaleUserModel : currentUserModel
        });
    }
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent loadOnDemand={true} user={currentUserModel} messages={chatMessages}></ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));