Boost React MultiSelect Dropdown Performance with Virtualization

Jollen Moyani - Sep 12 - - Dev Community

TL;DR: Handling large datasets in dropdown components can affect performance. The Syncfusion React MultiSelect Dropdown uses virtualization to enhance performance by only rendering items in view, reducing load time, memory usage, and improving user experience. This guide shows how to implement virtualization with local and remote data, including features like grouping, filtering, and checkboxes.

Today’s fast-paced web development environment demands apps that are both performant and user-friendly. One common challenge that developers face is handling large datasets in dropdown components.

The Syncfusion React MultiSelect Dropdown is a powerful tool for this purpose, but its performance can suffer when dealing with extensive data. This is where virtualization comes in, significantly enhancing the performance of your MultiSelect Dropdown.

This guide will explore how to implement virtualization to boost the performance of the React MultiSelect Dropdown component.

What is virtualization?

Virtualization is a technique for efficiently rendering extensive lists of items while minimizing the impact on performance. This method is particularly advantageous when dealing with large datasets because it ensures that only a fixed number of DOM (Document Object Model) elements are created. When scrolling through the list, existing DOM elements are reused to display relevant data instead of generating new elements for each item. This recycling process is managed internally.

During virtual scrolling, the data retrieved from the data source depends on the popup height and the calculation of the list item height. To enable virtualization, we need to set the enableVirtualization property to true in the React MultiSelect Dropdown component.

What are the benefits of virtualization?

1.Improved performance: The initial load time is reduced significantly by rendering only the items in the current view.
2.Enhanced user experience: Smoother scrolling and faster interactions create a more responsive interface.
3.Reduced memory usage: Fewer DOM nodes mean less memory consumption, which is especially beneficial for devices with limited resources.

Event handling in virtualization

While fetching data from the data source, the actionBegin event is triggered before data retrieval begins. Then, the actionComplete event is triggered once the data is successfully fetched. This event handling ensures that the app can respond appropriately during the data loading, providing a seamless user experience.

Incremental search with virtualization

The React MultiSelect Dropdown component supports incremental search with virtualization. When a key is typed, the focus is moved to the respective element in the open popup state. In the closed popup state, the popup opens, and the focus moves to the relevant element in the popup list based on the typed key. The incremental search functionality is well-suited for scenarios involving remote data binding.

Implementing virtualization in the React MultiSelect Dropdown

Follow these steps to implement virtualization in the Syncfusion React MultiSelect Dropdown component:

Step 1: Install Syncfusion React Dropdown components

First, install the Syncfusion React Dropdowns package using the following command:

npm install @syncfusion/ej2-react-dropdowns
Enter fullscreen mode Exit fullscreen mode

You can also refer to the getting started with React MultiSelect Dropdown component documentation for more details.

Step 2: Initialize the React MultiSelect Dropdown with virtualization

Let’s create a basic React MultiSelect Dropdown with virtualization enabled. You need to import the VirtualScroll service and inject it into the component. Then, you can enable it by setting the enableVirtualization property to true. The appropriate columns should be mapped to the fields property.

Refer to the following code example to bind local data with the React MultiSelect Dropdown.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));

    const fields = { text: 'text', value: 'id' };

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            allowFiltering={false}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Enabling virtualization in React MultiSelect Dropdown component

Enabling virtualization in React MultiSelect Dropdown component

Step 3: Binding remote data

The React MultiSelect Dropdown component supports retrieving of data from remote data services with the help of the DataManager component. This triggers the actionBegin and actionComplete events and then updates the list data. During virtual scrolling, additional data is retrieved from the server, triggering the actionBegin and actionComplete events at that time.

Refer to the following code example to bind remote data.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const customerData = new DataManager({
        url: ' https://services.syncfusion.com/react/production/api/virtualDropdownData',
        adaptor: new UrlAdaptor,
        crossDomain: true
    });

    const customerField = { text: 'OrderID', value: 'OrderID' };

    return (
        <MultiSelectComponent id="datas"
            dataSource={customerData}
            placeholder="OrderID"
            enableVirtualization={true}
            allowFiltering={true}
            fields={customerField}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Binding and retrieving remote data in React MultiSelect Dropdown with virtualization

Binding and retrieving remote data in React MultiSelect Dropdown with virtualization

Step 4: Customizing items count in virtualization

When the enableVirtualization property is enabled, the take property provided by the user within the Query parameter at the initial state or during the actionBegin event will be considered only if it is above the minimum threshold (30 items).

The following example explains how to customize the item count in virtualization.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import { Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));

    const fields = { text: 'text', value: 'id' };
    const query = new Query().take(50);

    const handleBegin = (args) => {
        args.query = new Query().take(40);
    };

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            query={query}
            allowFiltering={false}
            actionBegin={handleBegin}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Customizing items count in React MultiSelect Dropdown with virtualization

Customizing items count in React MultiSelect Dropdown with virtualization

Step 5: Grouping with virtualization

The React MultiSelect Dropdown component also supports grouping with virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the groupBy field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience.

Refer to the following code example.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
        group: `Group ${Math.floor(i / 50) + 1}`
    }));

    const fields = { groupBy: 'group', text: 'text', value: 'id' };

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            allowFiltering={true}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Grouping with virtualization in React MultiSelect Dropdown component

Grouping with virtualization in React MultiSelect Dropdown component

Step 6: Filtering with virtualization

The MultiSelect Dropdown includes a built-in feature that enables data filtering when the allowFiltering option is enabled.

Refer to the following code example.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 1500 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));

    const fields = { text: 'text', value: 'id' };

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            allowFiltering={true}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Filtering with Virtualization

Filtering with Virtualization

Step 7: Checkbox with virtualization

You can also use the CheckBox selection with virtualization. Its integrated functionality allows us to select multiple values using checkboxes when the mode property is configured to CheckBox.

import { MultiSelectComponent, Inject, VirtualScroll, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));

    const fields = { text: 'text', value: 'id' };

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            mode="CheckBox"
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            allowFiltering={false}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll, CheckBoxSelection]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Checkbox with virtualization in React MultiSelect Dropdown

Checkbox with virtualization in React MultiSelect Dropdown

Step 8: Custom value with virtualization

The MultiSelect component supports adding custom value with virtualization. When the allowCustomValue property is enabled, users can include a new option not currently available in the component’s dataSource.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));

    const fields = { text: 'text', value: 'id' };

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            allowFiltering={false}
            allowCustomValue={true}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Adding custom values with virtualization in React MultiSelect Dropdown

Adding custom values with virtualization in React MultiSelect Dropdown

Step 9: Preselect values with virtualization

The React MultiSelect Dropdown component extends its support for preselected values with virtualization. When values of local or remote data are bound to the component, the corresponding data value is fetched from the server and promptly updated within the component.

import { MultiSelectComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
    const records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));

    const fields = { text: 'text', value: 'id' };
    const value = ['id1', 'id22', 'id123'];

    return (
        <MultiSelectComponent id="datas"
            dataSource={records}
            value={value}
            placeholder="e.g. Item 1"
            enableVirtualization={true}
            allowFiltering={false}
            fields={fields}
            popupHeight="200px"
        >
            <Inject services={[VirtualScroll]} />
        </MultiSelectComponent>
    );
};

ReactDOM.render(<App />, document.getElementById('sample'));
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Preselect values with virtualization in the React MultiSelect Dropdown

Preselect values with virtualization in the React MultiSelect Dropdown

Note: For more details, refer to virtualization in React MultiSelect Dropdown component documentation.

StackBlitz reference

Also, refer to the React MultiSelect Dropdown with virtualization StackBlitz demo.

Conclusion

Thanks for reading! Leverage the power of virtualization in Syncfusion React MultiSelect Dropdown to enhance your apps’ performance and user experience. Whether you are working with local or remote data, implementing features such as grouping, filtering, checkboxes, custom values, and preselected values can all benefit from virtualization. This ensures a smooth and responsive interface even with large datasets. Use these techniques in your projects today to experience improved performance and usability.

The existing customers can download the latest version of Essential Studio from the License and Downloads page. If you are new, try our 30-day free trial to explore our incredible features.

Feel free to contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
React Native 0.76: The New Architecture That Takes Performance and Efficiency to the Next Level 🚀

reactnative, react, ios, android
Image
Cat Flaps For French Doors
Image
Fit a Cat Flap in a UPVC Door Panel
Image
13 Things You Should Know About Drip Brew That You Might Not Have Known
Image
Docker exposes itself to your LAN

docker, ip, lan
Image
Progress Bars in iOS 18 - #30DaysOfSwift

swift, swiftui, beginners, tutorial
Image
This Is The History Of Asbestos Settlement
Image
This One Copilot Is All You Need For 10x Productivity

ai, vscode, programming, beginners
Image
How to Optimize Website for SEO Results to Improve Rankings 🎯

webdev, seo, website, beginners
Image
Hello World!
Image
How to Install a Cat Flap
Image
ServBay New Features: MongoDB Integration, CORS is Ready

mongodb, webdev, beginners, programming
Image
Why Is Everyone Talking About Local Gas Engineer Near Me Right Now
Image
The No. 1 Question Anyone Working In Gas Engineer Certificate Needs To Know How To Answer
Image
Buy Verified Wise Accounts

node, career, css, typescript
Image
undefined symbol: pg_hmac_free
Image
HTML & CSS for Beginners: Build Your First Website Step-by-Step | The Coder Compass

html, css, webdev, frontend
Image
Three Greatest Moments In Hook Locks History
Image
Sliding Door Hook Lock With Key Tips That Can Change Your Life
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .