Optimizing Performance

For many applications, React has already done a lot of work on performance, and we don't need to do more for this, and we hope you have some knowledge of React's performance optimization first. However, when your application needs to render a large number of elements, this can still be an issue for performance. In React Suite, we will provide you with some useful performance optimization solutions from the perspective of user business scenarios.

Virtualize Long Lists

Among the components provided by React Suite, Table, SelectPicker, CheckPicker, TreePicker, CheckTreePicker, Tree and other components support a technique known "windowing". If your app uses them, just add a virtualized attribute to the component when using it. The following will demonstrate through the SelectPicker and Table components.

Id
First Name
Last Name
Gender
Age
City
Email
1
Dejah
Kreiger
female
39
Brookeside
Dejon_Langworth@gmail.com
2
Stephania
Legros
female
41
North Lizethboro
Lacy95@yahoo.com
3
Gayle
Hauck
female
21
Lake Xzavierton
Annette.Shanahan32@yahoo.com
4
Laurie
McKenzie
female
40
Orinfurt
Joel.Donnelly@hotmail.com
5
Libby
Koch
female
36
South Wilfred
Glennie_Hoeger-Gulgowski46@gmail.com
6
Elena
Durgan
male
23
Oakland
Karina_Prohaska23@yahoo.com
7
Ashly
McLaughlin
female
33
Olympia
Jeramy_Bashirian@yahoo.com
8
Pearlie
Will
male
21
McLaughlinville
Kelsi.Stiedemann40@yahoo.com
9
Lionel
Kihn
female
40
East Selinaton
Emie_Grady@yahoo.com
10
Zachariah
Pouros
male
32
Vista
Carissa.Conroy@hotmail.com
11
Clinton
Turner
female
32
Lake Aurore
Mariano.Gerhold@gmail.com
12
Frankie
Grady
female
25
East Candida
Dashawn.Olson95@hotmail.com
13
Carson
Daniel
female
33
Turnerworth
Avery13@hotmail.com
Loading...

Infinite Loader

To avoid loading too much data the first time, it can be designed to fetch data instantly as the user scrolls down.

Index
Texts
0
Earum dolor debitis saepe et. Dolorum enim officiis corporis magni. Hic odio fugit labore magnam voluptas vitae tempore esse quo.
1
Autem exercitationem sint provident eligendi cum. Quod harum animi maiores in fugiat voluptatem. A praesentium ut.
2
Rerum id occaecati ab illum. Veritatis dignissimos sit. Perferendis blanditiis enim atque mollitia.
3
Vero rem aliquid commodi laborum quia necessitatibus eius autem illum. Quo similique aliquid distinctio occaecati. Veniam cupiditate pariatur hic adipisci sint.
4
Exercitationem at reprehenderit dolorem tenetur illo. Quod non molestiae aliquid accusantium fugiat dolore eveniet minima expedita. In architecto nemo veniam fugiat fugiat eveniet dolor.
5
Qui voluptas repellendus quidem cumque cumque quasi maxime tempora earum. Nesciunt facilis fugit voluptate illum impedit nam iusto ullam. Accusamus porro aperiam corporis.
6
Eveniet aliquam placeat consectetur esse recusandae necessitatibus. Nesciunt natus quis hic mollitia. Doloremque esse est eaque.
7
Eum aliquid ratione soluta repellendus ullam minima ratione. Veritatis distinctio itaque ea quod asperiores. Deleniti neque suscipit.
8
Fugit fugiat eligendi. Tenetur sequi impedit corrupti saepe ad accusantium dolore. Blanditiis recusandae ipsam at.
9
Odit porro natus modi sit. Et explicabo reprehenderit repellat nisi maiores debitis officiis. Suscipit rerum tempora fugiat eos.
10
Necessitatibus quidem pariatur sint soluta quibusdam neque. Aliquid velit neque corrupti voluptatem recusandae beatae sapiente quod maxime. Corporis quo quidem repellat ea magnam aliquid.
11
Iusto aut nulla at maiores aspernatur. Architecto quidem esse qui voluptates et eaque. Alias ut voluptatem consequuntur doloribus ipsa soluta.
12
Dolor culpa ipsa ipsum optio consectetur cum ipsa illo unde. Dicta blanditiis explicabo non nesciunt beatae mollitia pariatur. Reprehenderit illum molestias beatae.
Loading...

Other Optimizing Performance

Vercel banner