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
Serenity
Fisher
female
38
Gladycefort
Lisette.Lynch73@hotmail.com
2
Maryam
Bergnaum
female
45
Port Reedboro
Ephraim36@hotmail.com
3
Ari
Boehm
female
23
Atlanta
Adrianna71@hotmail.com
4
Shannon
Mohr
female
23
South Eliane
Sabina_Lowe@gmail.com
5
Nicholaus
Little
male
29
New Gerda
Lawrence.Bechtelar@hotmail.com
6
Violette
Doyle
female
40
New Vallie
Keaton_Brakus@gmail.com
7
Hildegard
Quitzon
male
20
Lake Augustus
Christopher.Welch29@gmail.com
8
Magnolia
Bergstrom
female
44
East Chloe
Dewitt98@gmail.com
9
Elwyn
Koepp
female
46
Lake Bernadineshire
Khalid_Barton2@hotmail.com
10
Lincoln
Koch
female
43
West Beryl
Freddie.Beer@hotmail.com
11
Brooke
Stroman
male
36
Port Antonettastead
Flavio.Lesch92@yahoo.com
12
Jesus
Green
female
45
Lake Jaylon
Yoshiko83@hotmail.com
13
Julian
Gusikowski
male
39
Lake Sherman
Clifford.Thiel@yahoo.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
Sit error accusantium. Tenetur expedita autem culpa minima pariatur incidunt. Et necessitatibus nisi eos ex labore pariatur sunt maxime.
1
Nesciunt in pariatur quia voluptatibus earum. Occaecati nemo architecto quisquam ea quidem atque itaque excepturi quo. Laborum atque non dolor adipisci quidem sed a.
2
Eius expedita adipisci. Distinctio et fugit iste fugiat doloribus similique. Eligendi aliquid minima ducimus itaque consequatur quas omnis harum.
3
Voluptatum sequi vero vero fugit. Sint delectus laboriosam. Praesentium quidem labore quam sunt.
4
Quaerat nesciunt nemo accusantium sapiente ipsam excepturi fugiat accusantium recusandae. Quos molestiae ea nihil ut inventore dolorum tempore. Explicabo tempore quos dignissimos.
5
Quisquam sunt nihil occaecati alias. Voluptatibus aliquam quasi rerum alias tempora soluta cumque. Quas eligendi eos suscipit quas aut reiciendis reiciendis.
6
Doloremque nihil est hic a voluptas sunt molestiae. Doloremque voluptas sed iure doloribus odio blanditiis neque. Officiis non sint est distinctio accusamus quia sunt eligendi.
7
Modi animi quam nesciunt. Nisi accusamus laboriosam itaque optio delectus voluptatem accusamus pariatur. Nobis praesentium natus eveniet repellendus.
8
Consequuntur sequi delectus consequatur debitis. Corrupti quas aliquam sunt vitae modi molestiae officia voluptatum. Ad fuga est.
9
Laborum vitae praesentium officiis sed praesentium corrupti asperiores qui. Quis exercitationem labore incidunt optio repellendus sapiente incidunt. Accusantium exercitationem neque ipsam.
10
Numquam earum quibusdam quidem explicabo quis excepturi dolorum. Doloribus ducimus sint. Corrupti labore temporibus amet velit hic.
11
Beatae officiis sequi fugiat. Cum nostrum corporis architecto quae blanditiis unde. Repellat dolorem soluta neque rem est blanditiis ducimus reprehenderit deleniti.
12
Animi cumque eligendi impedit amet ipsum numquam voluptatibus. Accusantium suscipit fugiat quaerat iusto amet nisi esse placeat. Laudantium optio numquam dicta.
Loading...

Other Optimizing Performance

Vercel banner
Virtualize Long Lists
Infinite Loader
Other Optimizing Performance