Dynamic Loading
- To optimize performance with long lists, our approach involves dynamically loading elements in the
DOM as needed. This means we only render the list data currently visible on the screen and reuse existing DOM components to display new data as old ones scroll out of view.
- This method significantly enhances performance when handling extensive lists by reducing the amount of content rendered at once.
- For example: You may have selected
500 records for a list, but using Dynamic Loading will introduce only a fraction of them into the DOM at any given time, resulting in smoother scrolling.
An illustration illustrating this concept can be found here: (credited to josh article below)
https://i.sstatic.net/N6oVF.png
Check out an implementation example of Dynamic Loading
Continuous Loading
- In contrast, Continuous Loading involves fetching and displaying a predefined set of records in a list. As you reach the end of the list, it automatically loads the next batch of items and continues this process until all items are fetched.
- Compared to Dynamic Loading, Continuous Loading offers greater flexibility and customization options through more
Instance Members. This allows for enhanced control over the component's behavior.
Explore this demonstration of Continuous Loading
Additional resources: Check out Link 1 and Link 2