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
10 Things We All Do Not Like About Wall Hanging Electric Fires
Image
Responsible For An Wall Mounted Electric Fireplace Heater Budget? 12 Ways To Spend Your Money
Image
10 Graphics Inspirational About ADHD Medication UK
Image
Leetcode — Top Interview 150–169. Majority Element

java, arrays, leetcode, interview
Image
Buzzwords De-Buzzed: 10 Other Ways To Say Medication For ADHD
Image
10 Things Your Competition Can Teach You About Accident Lawyer Jacksonville
Image
SPO-lab-4: Assembly in x86_64 & ARM64

spo
Image
c# clean code: Guide to Defining and Structuring Classes

cleancode, cleancoding, csharp, dotnet
Image
Incorporating a Voice Assistant in React Using Cutting-Edge Technology

ai, chatgpt, voicebot, voiceui
Image
The Advanced Guide To Bi Fold Repairs
Image
Find Out What Mesothelioma Caused By Asbestos Tricks The Celebs Are Utilizing
Image
Modern Traffic Management with Gateway API in Kubernetes

kubernetes, microservices, trafficmanagement, gatewayapi
Image
Story of an open source newbie + lessons learnt

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Why We Our Love For Personal Injury Claim Compensation (And You Should Too!)
Image
The Leading Reasons Why People Perform Well On The Asbestos Litigation Paralegal Industry
Image
What's The Reason Everyone Is Talking About Asbestos Law Firm Right Now
Image
How AI-Powered Product Recommendations Are Revolutionizing Online Shopping

ai, webdev, beginners, opensource
Image
Cisza w Domu: Jak Wyciszenie Ścian Zmienia Twoje Wnętrze
Image
Do You Think You're Suited For Accident Lawyer Boston? Take This Quiz
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .