Realistic performance: medium display with obvious lag

I am experiencing a responsive router latency when changing to a route with 250 retry components. I was profiling chrome and noticed that the bottleneck is in the "ReactCompositeComponentMixin.mountComponent". This function wastes 36.1ms on its own and is 570.7ms.

I noticed that visiting a route in the responder router re-initializes the assigned routing component (which contains those 250 re-components). In this case, the state object of that routehandler component is immutable, but I cannot use it since shouldComponentUpdate is never triggered.

I was wondering if this is a responsive issue. If so, I'll try to make time-limited entries at boot time and load the rest when the user scrolls down.

All components are "clean" and do not perform complex calculations.

The html structure of the repetition component is as follows:

<section data-reactid=".0.3.0.$3553">
  <div data-reactid=".0.3.0.$3553.0"><span data-reactid=".0.3.0.$3553.0.0">TEST</span><span data-reactid=".0.3.0.$3553.0.1">TEST</span>
  </div>
  <header data-reactid=".0.3.0.$3553.1">
    <h1 data-reactid=".0.3.0.$3553.1.0">TEST</h1>
  </header>
  <footer data-reactid=".0.3.0.$3553.2">TEST</footer><i data-reactid=".0.3.0.$3553.3"></i>
  <button data-reactid=".0.3.0.$3553.4">TEST</button>
  <div data-reactid=".0.3.0.$3553.5 ">
    <button data-reactid=".0.3.0.$3553.5.0 ">TEST</button>
  </div>
</section>
      

Run codeHide result


+3
reactjs


source to share


No one has answered this question yet

Check out similar questions:

317
Change the post-render code?
nine
Server-side crash application response with load
4
React.js shouldComponentUpdate () and react-router Link
2
React-Bootstrap Modal - Error Unmounting from DOM
2
React router + redux navigating back doesn't call componentWillMount
1
Bypassing a refresh blocker in a non-route component with React Router and React Hooks
0
Redux render macro handles delays when changing steps
0
Link router for a route from another component
0
Nested React + Meteor component not getting props on page load
0
Wrong position of footer component in React Router 4 and layout



All Articles
Loading...
X
Show
Funny
Dev
Pics