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
Noelia
Lueilwitz
female
41
Upland
Roberta42@yahoo.com
2
Cicero
Konopelski
male
40
Agustinaburgh
Freida86@hotmail.com
3
Columbus
Schimmel
male
46
Ubaldoborough
Jaron_Connelly38@yahoo.com
4
Cullen
Cruickshank
male
28
Vernberg
Angelica22@yahoo.com
5
Jacinthe
Hackett
female
33
West Santiago
Everette26@gmail.com
6
Ward
Mueller
female
33
Johannatown
Minerva_Farrell@hotmail.com
7
Ottis
Pagac
female
30
Maraton
Zora.Haley@gmail.com
8
River
Klein
female
46
Port Theresiastad
Orrin_Walker@hotmail.com
9
Cathrine
Weber
male
35
Schmittland
Madge_Shanahan@hotmail.com
10
Gardner
Swaniawski
male
22
South Easter
Maybell.Wintheiser@yahoo.com
11
Maia
Wiza
female
44
West Joliefield
Edmond_Gutmann33@yahoo.com
12
Turner
Mayer
male
37
Glovertown
Hipolito55@gmail.com
13
Alene
Boyer
male
44
Apex
Brad.Williamson92@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
Perferendis saepe nisi qui ullam dicta. Deserunt repudiandae fugiat. Quibusdam doloribus voluptate natus doloribus. Facilis voluptatem mollitia veritatis quam magnam molestias quibusdam. Ipsum perspiciatis ducimus unde enim mollitia veritatis inventore. Quia reprehenderit nisi alias unde deleniti iusto eligendi officia.
1
Totam magni dolor quidem sit harum placeat. Quas perspiciatis quisquam accusantium. Optio aut sapiente praesentium quod iure aspernatur sunt. Reiciendis quisquam aliquid non a nihil facere. Sequi mollitia iure possimus porro similique impedit eligendi qui nam.
2
Amet iure dolor placeat voluptatem. Expedita sed culpa neque doloremque voluptas error sed facilis. Reprehenderit minus quidem. Id ut magni assumenda iusto laudantium corporis ab. Nesciunt minus deserunt beatae sunt veniam maiores.
3
Aliquam hic voluptatibus est officiis necessitatibus porro esse cumque. Cumque laborum qui enim eos aut dolorem. Nisi nisi modi possimus nihil. Unde eius officiis eum dignissimos necessitatibus impedit esse et incidunt. Consequuntur porro dignissimos quasi vel distinctio nesciunt. Nesciunt eos maiores.
4
Earum pariatur quisquam unde. Adipisci optio suscipit. Beatae sapiente iure blanditiis. Ducimus vitae aliquam. Fugiat vel alias possimus aliquid fuga corporis quaerat accusamus dolore.
5
Aut dolor nulla sint placeat. At provident quibusdam commodi. Nulla deleniti quo error velit quidem animi. Dolorem quis corporis quia quam voluptatum debitis amet tenetur.
6
Aliquam consectetur cum voluptates quia esse numquam temporibus. Veniam occaecati incidunt recusandae officia facilis dolorem fugiat deleniti. Quos totam a inventore possimus aspernatur rerum recusandae. Officiis adipisci possimus fuga aliquam. Accusantium ex eius debitis nam aliquid aliquid ullam.
7
Praesentium nam eligendi sit. Cum veniam recusandae earum. Autem delectus veritatis rem aspernatur id occaecati tenetur libero sapiente.
8
Necessitatibus vero et voluptatibus. Nobis molestiae sequi consequuntur sed officia laudantium. Possimus quos dolores. Facilis voluptatibus labore accusantium repudiandae consequatur nostrum corporis quidem. Consequatur quas nam eius cupiditate est voluptatum.
9
Itaque exercitationem accusamus. Corrupti magni dolore. Officia voluptatem recusandae harum debitis recusandae. Alias laboriosam distinctio reprehenderit porro ad soluta sed distinctio culpa.
10
Quibusdam qui sequi. Suscipit excepturi eveniet. Tenetur velit expedita voluptate quos facere. Doloribus natus itaque dolores ipsa unde omnis modi nemo corrupti. Error officia et corrupti inventore est sunt dignissimos est excepturi. Saepe laudantium voluptatibus ex consequuntur aperiam quibusdam vero neque.
11
Voluptatem nulla cupiditate nam officiis ullam. Minima quia assumenda dolorem consequuntur perspiciatis. Delectus repudiandae corrupti nihil voluptas mollitia. Occaecati nulla praesentium cumque rem deleniti. Nisi est esse quis. Perferendis rerum molestiae labore in unde ab magni cum.
12
Minus itaque neque exercitationem excepturi vitae quos vel. Quam deserunt voluptas. Ipsa odit vitae repudiandae delectus provident dicta incidunt.
Loading...
Other Optimizing Performance
- Minimizing Bundle Size：We should make the compiled files as small as possible to improve user experience.