reactjs - React performance: rendering medium size list with obvious delay -

i experiencing delay react , react-router when navigating route 250 repeated components. profiled chrome , noticed bottleneck @ "reactcompositecomponentmixin.mountcomponent". function spends 36.1ms in , total of 570.7ms.

i noticed visiting route in react-router cause assigned routehandler component (which holds these 250 repeated components) reinitialize every time. in case, state object of routehandler component immutable cannot utilize benefit since shouldcomponentupdate never triggered.

i wondering if know issue react. if try render limited records time on initial load , load rest user scroll down.

all components "pure" , no complex computations performed.

the html structure of repeat component's following:

<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>