title: React performance: rendering big list with PureRenderMixin
body: <p>I took a TodoList example to reflect my problem but obviously my real-world code is more complex.</p>
  
  <p>I have some pseudo-code like this.</p>
  
  <pre><code>var Todo = React.createClass({
    mixins: [PureRenderMixin], 
    ............ 
  }
  
  var TodosContainer = React.createClass({
    mixins: [PureRenderMixin],    
  
    renderTodo: function(todo) {
       return &lt;Todo key={todo.id} todoData={todo} x={this.props.x} y={this.props.y} .../&gt;;
    },
  
    render: function() {
       var todos = this.props.todos.map(this.renderTodo)
       return (
            &lt;ReactCSSTransitionGroup transitionName="transition-todo"&gt;
                   {todos}
            &lt;/ReactCSSTransitionGroup&gt;,
       );
    }
  
  });
  </code></pre>
  
  <p>All my data is immutable, and PureRenderMixin is used appropriately and everything works fine. When a Todo data is modified, only the parent and the edited todo is re-rendered.</p>
  
  <p>The problem is that at some point my list grows big as the user is scrolling. And when a single Todo is updated, it takes more and more time to render the parent, call <code>shouldComponentUpdate</code> on all the todos, and then render the single todo.</p>
  
  <p>As you can see, the Todo component has other component than the Todo data. This is data that is required for render by all the todos and is shared (for example we could imagine there's a "displayMode" for the todos). Having many properties makes the <code>shouldComponentUpdate</code> perform a little bit slower. </p>
  
  <p>Also, using <code>ReactCSSTransitionGroup</code> seems to slow down a little too, as <code>ReactCSSTransitionGroup</code> have to render itself and  <code>ReactCSSTransitionGroupChild</code> even before the <code>shouldComponentUpdate</code> of todos is called. <code>React.addons.Perf</code> shows that <code>ReactCSSTransitionGroup &gt; ReactCSSTransitionGroupChild</code> rendering is time wasted for each item of the list.</p>
  
  <p>So, as far as I know, I use <code>PureRenderMixin</code> but with a larger list this may be not enough. I still get not so bad performances, but would like to know if there are easy ways to optimize my renderings.</p>
  
  <p>Any idea?</p>
  
  <hr>
  
  <p><strong>Edit</strong>:</p>
  
  <p>So far, my big list is paginated, so instead of having a big list of items, I now split this big list in a list of pages. This permits to have better performances as each page can now implement <code>shouldComponentUpdate</code>. Now when an item changes in a page, React only has to call the main render function that iterates on the page, and only call the render function from a single page, which make a lot less iteration work.</p>
  
  <p>However, my render performance is still linear to the page number (O(n)) I have. So if I have thousands of pages it's still the same issue :) In my usecase it's unlikely to happen but I'm still interested in a better solution.</p>
  
  <p>I am pretty sure it is possible to achieve O(log(n)) rendering performance where n is the number of items (or pages), by splitting a large list into a tree (like a persistent data structure), and where each node has the power to short-circuit the computation with <code>shouldComponentUpdate</code> </p>
  
  <p>Yes I'm thinking of something akin to persistent data structures like Vector in Scala or Clojure:</p>
  
  <p><img src="https://i.stack.imgur.com/Nc2Tk.png" alt="http://hypirion.com/imgs/pvec/9-annotated.png"></p>
  
  <p>However I'm concerned about React because as far as I know it may have to create intermediate dom nodes when rendering the internal nodes of the tree. This may be a problem according to the usecase (<a href="https://github.com/facebook/react/issues/2127" rel="nofollow noreferrer">and may be solved in future versions of React</a>)</p>
  
  <p>Also as we are using Javascript I wonder if Immutable-JS support this, and make the "internal nodes" accessible. See: <a href="https://github.com/facebook/immutable-js/issues/541" rel="nofollow noreferrer">https://github.com/facebook/immutable-js/issues/541</a></p>
  
  <p><strong>Edit</strong>: useful link with my experiments: <a href="https://stackoverflow.com/questions/34782249/can-a-react-redux-app-really-scale-as-well-as-say-backbone-even-with-reselect/34788570#34788570">Can a React-Redux app really scale as well as, say Backbone? Even with reselect. On mobile</a></p>