I am using React, Bootstrap and Typescript.
I have built a list/edit screen that can contain up to 200 lines (100 “lists” Lines and 100 “detail” lines).
Each “detail” line contains a complete HTML form-by default they (inside the Bootstrap “Collapse” component) are hidden until the user starts editing them.
Please note that this is a learning exercise; before I start to see performance issues, I am trying to understand the extent to which React can be driven in terms of UI complexity.
I am not specifically looking for a solution for this page – I can do a lot of UX things, limit the number of lines per page, divide the details into their own screens, use modal dialogs, etc.
The list and detailed information components are implemented as “PureComponent”, and the state objects involved are all immutable Typescript objects (the list is implemented using Immutable.js) .
I estimate that there are about 1500 – 2000 React components involved in rendering this page.
I am very satisfied with the complexity of the code behind this implementation-it is easy to read and change, I believe in a real application As the complexity increases, the implementation will remain maintainable.
But the performance is not what I want.
I am using the Chrome effect tag with the URL “?react_perf” to Measure this page.
Through 100 entities, “User Timing” in Chrome shows me that “Table [Update]” takes 60-90 milliseconds.
This seems to be a long time, I know these numbers do not represent production performance, because I am using React The development version to complete performance timing.
When the application is compiled and produced, the performance of the application will be better-on a fairly standard desktop enterprise computer or iPhone6, the performance will be ok. If you are really looking for it, you The lag can be seen, but it is hardly noticeable.
But on slower hardware (Samsung Gala On xy tablets and older Samsung phones), the lag is very noticeable.
I’m trying to understand if I should look for major bugs/bottlenecks, or is this about the performance of so many components that I should expect?
Possible improvements:
>The obvious main thing I can do is to reduce the number of React components by not rendering all these details, unless the user extends the entity
>This will definitely improve performance-table update time can be reduced to about 20-30mm of development time, especially when it is almost undetectable in production.
>People will inevitably recommend it Redux
>If I did this, what kind of performance improvement would you expect to see?
>My guess is that the Redux implementation does not actually have much effect on performance (unless I make some major mistakes, Redux will guide me to avoid it)
So the problem is:
< p>
“what is a reasonable upper limit for the number of components a React
page should have”?
Or:
“is 50+ milliseconds to do an update reasonable for a screen of this size”?
If my implementation is not very bad Correct, then this exercise makes me think that my general performance guide is:
>”Try to keep less than about 500 React components on any given screen”
< div class="content-split">
I think benchmarking for your specific scenario is a must.
Make sure to type the elements correctly, And implement shouldComponentUpdate manually as much as possible for shortcuts.
I am using React, Bootstrap and Typescript.
I have built one The list/edit screen can contain up to 200 lines (100 “list” lines and 100 “detail” lines).
Each “detail” line contains a complete HTML form-by default they (in Bootstrap “Collapse” Component) until the user starts editing them.
Please note that this is a learning exercise; before I start to see performance issues, I am trying to understand how the complexity of the UI can drive React Degree.
I am not specifically looking for a solution for this page-I can do a lot of UX things, limit the number of lines per page, divide the details into their own screens, use modal dialogs, etc.
< img src="/wp-content/uploads/images/architecture/performance/1626814709589.png" alt="The UI" >
List and detailed information component implementation For “PureComponent”, the state objects involved are all immutable Typescript objects (the list is implemented using Immutable.js).
I estimate that there are about 1500 – 2000 React components involved in rendering this page.
I am very satisfied with the complexity of the code behind this implementation-it is easy to read and change, and I believe that in a real application, as the complexity increases, the implementation will remain maintainable.
But performance does not Not what I expected.
I am using “? “react_perf” URL’s Chrome performance tag to measure this page.
Through 100 entities, the “User Timing” in Chrome shows me that “Table [Update]” takes 60-90 milliseconds.
< img src="/wp-content/uploads/images/architecture/performance/1626814709589.png" alt="performance" >
This seems to be a long time, I know these numbers do not represent Production performance, because I am using the development version of React to complete performance timing.
When the application is compiled for production, the performance of the application will be better-on a fairly standard desktop enterprise computer or iPhone6, the performance will be fine. If You are really looking for it, you can see the lag, but it is barely noticeable.
But on slower hardware (Samsung Galaxy tablets and older Samsung phones), the lag is very noticeable. p>
I’m trying to understand whether I should look for a major bug/bottleneck, or is this about the performance of so many components I should expect?
Possible improvements:
> The obvious main thing I can do is to reduce the number of React components by not rendering all these detailed forms, unless the user extends the entity
>This will definitely improve performance-the table update time can be reduced to about 20- 30mm of development time, especially in production is almost undetectable.
>People will inevitably recommend Redux
>If I do this, you will expect to see What kind of performance improvement?
>My guess is that the Redux implementation does not actually have much effect on performance (unless I make some major mistakes, Redux will guide me to avoid it)
So the problem is :
“what is a reasonable upper limit for the number of components a React
page should have”?
Or:
“is 50+ milliseconds to do an update reasonable for a screen of this size”?
If My implementation is not very incorrect, so this exercise makes me think that my general performance guide is:
>”Try to keep below about 500 React components on any given screen”
I think the benchmark for your particular scenario is Required.
Make sure to type the elements correctly, and implement shouldComponentUpdate manually for shortcuts as much as possible.
