Example of Load On-demand in React Chat UI Component

/
/
LoadOnDemand

This sample demonstrates the load on-demand feature of the Chat UI component to render a large number of data's.

More Details...

Michale Suyama
June 29, 2025
29/06/2025 11:15 AM
Message 184 from Albert
Michale Suyama
29/06/2025 11:16 AM
Message 185 from Michale
Avatar
29/06/2025 11:17 AM
Message 186 from Albert
Michale Suyama
29/06/2025 11:18 AM
Message 187 from Michale
Avatar
29/06/2025 11:19 AM
Message 188 from Albert
Michale Suyama
29/06/2025 11:20 AM
Message 189 from Michale
Avatar
29/06/2025 11:21 AM
Message 190 from Albert
Michale Suyama
29/06/2025 11:22 AM
Message 191 from Michale
Avatar
29/06/2025 11:23 AM
Message 192 from Albert
Michale Suyama
29/06/2025 11:24 AM
Message 193 from Michale
Avatar
29/06/2025 11:25 AM
Message 194 from Albert
Michale Suyama
29/06/2025 11:26 AM
Message 195 from Michale
Avatar
29/06/2025 11:27 AM
Message 196 from Albert
Michale Suyama
29/06/2025 11:28 AM
Message 197 from Michale
Avatar
29/06/2025 11:29 AM
Message 198 from Albert
Michale Suyama
29/06/2025 11:30 AM
Message 199 from Michale
Avatar
29/06/2025 11:31 AM
Message 200 from Albert
Description

In this example, the chat messages are the list of conversations between two users allowing to scroll through their conversation history. The loadOnDemand property allows you to load more messages on demand, improving the performance and reducing load times, particularly in long conversations. Only the visible conversations are render, reducing the amount of DOM elements and improving the overall performance.It highlights the improving performance and reducing load times, particularly in long conversations.