ReactJS – Reaction Performance: What is a good guide for the number of components?

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.