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


source to share





All Articles