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
Ara
Howell
female
31
North Justinaside
Anika_OReilly@hotmail.com
2
Danyka
O'Keefe
female
26
Palmashire
Pierce_Collier@hotmail.com
3
Kenneth
Beahan
male
41
Madison
Joanie92@hotmail.com
4
Demetris
Hoeger
male
26
Port Myra
Dakota_Leannon50@yahoo.com
5
Stacy
Yost
female
36
Port Keeley
Valerie.Legros@hotmail.com
6
Yolanda
Mills
male
18
Cummingsport
Lue_Tremblay60@hotmail.com
7
Melody
Hagenes
female
36
Abshireton
Eleanore_Veum@hotmail.com
8
Maci
Waelchi
female
37
Port Sasha
Mose51@gmail.com
9
Cyrus
Klocko
female
42
Lake Roselyn
Tyra0@gmail.com
10
Rozella
Langosh
female
22
Lake Leolacester
Trisha_Tromp99@hotmail.com
11
Madison
Blick
female
24
Robertsland
Eliseo_Goyette@yahoo.com
12
Nora
Kilback
male
19
Deannaboro
Olen_Gorczany86@hotmail.com
13
Pearline
Turner
female
28
New Grant
Tess_Bins@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
Atque sit excepturi quasi aperiam nisi accusamus ex. Itaque quia alias numquam consequatur. Maiores similique autem cumque ut consequatur nesciunt consequatur.
1
Eaque eligendi et exercitationem ipsum impedit neque mollitia quaerat suscipit. Ullam rem ad animi excepturi. Incidunt exercitationem repellat dolor corrupti quas hic vitae voluptatum.
2
Sequi esse harum animi quasi animi ullam dolore. Quod eius temporibus rerum hic voluptatem id. Minima molestiae suscipit a tenetur rem laborum deserunt.
3
Dolorem debitis est laborum reiciendis. Debitis tempore amet. Unde quaerat iusto veniam expedita id nostrum.
4
Vel rem quidem neque perferendis natus delectus. Fugit autem itaque iusto dolores. Cumque sapiente qui consequuntur sit recusandae porro asperiores.
5
Nulla debitis dignissimos corrupti. Praesentium ducimus quaerat ratione rem delectus eaque possimus cupiditate maxime. Cum necessitatibus sit necessitatibus doloribus error ratione error modi minima.
6
Aut incidunt repellendus vero odit a fuga quod. Enim voluptates reiciendis temporibus voluptatum quae. Nobis alias mollitia inventore enim laboriosam.
7
Est sit iusto recusandae quos suscipit ipsa. Vitae aut exercitationem ex facilis voluptates aspernatur natus praesentium iste. Iure omnis in incidunt.
8
Numquam ut quis inventore voluptas sit nobis. Voluptatem expedita alias iste consectetur molestias architecto earum rerum eos. Veniam ducimus corrupti quis inventore dolorem eveniet aut.
9
Accusantium doloremque cum nihil quam ratione nam labore dicta suscipit. Dolores ducimus molestiae ad cupiditate blanditiis fugit. Harum quis amet qui accusantium incidunt expedita quis magnam.
10
Magnam porro error possimus laboriosam voluptas explicabo dignissimos. Eos magni nostrum error sint facere. Autem eaque sint similique exercitationem sit placeat repellendus repudiandae.
11
Iusto in quasi. Iste doloremque recusandae. Occaecati aliquid occaecati ea tempore eum.
12
Unde cumque rem officia ipsum officiis officia earum quidem tempora. Natus eveniet sed incidunt occaecati deleniti harum dolorum ut. Quisquam ad ex aut voluptate.
Loading...

Other Optimizing Performance

Vercel banner
Virtualize Long Lists
Infinite Loader
Other Optimizing Performance