title: How to optimize the re-rendering of large amounts of child components?
body: <p>I'm a beginner when it comes to react.js and I'm building a component that contains a large number of changing items. </p>
  
  <p><strong>TLDR:
  I have a Parent component that contains many Child components (think > 1000) that change their state very quickly. However the state of the child components needs to be known in the parent component - therefore I lifted the state of all children to the parent component. Since all child components are rendered every time the state in the parent changes, the performance is pretty bad. A single changing pixel can take more than 200ms to update. Implementing <code>shouldComponentUpdate</code> on the Child component is still too slow. Do you have general advice how to handle such a case?</strong></p>
  
  <p>As a specific example of my issue I created an "graphics editor" example with a <code>PixelGrid</code> component consisting of 32 by 32 <code>Pixel</code> components:</p>
  
  <p><a href="https://jsfiddle.net/jshbax9g/7/" rel="nofollow noreferrer">JS Fiddle of example</a></p>
  
  <p>When the <code>onMouseDown</code> or <code>onMouseEnter</code> event is called on the <code>Pixel</code> component, the event is passed up to the parent <code>PixelGrid</code> component through prop callbacks, and the corresponding state (<code>PixelGrid.state.pixels[i].color</code>) is changed. Keep in mind that the PixelGrid component is supposed to be able to access all pixel values for further functionality, so keeping state in <code>Pixel</code> itself is really not an option, I think. But this means, that the whole <code>PixelGrid</code> component needs to be re-rendered when a single pixel changes. This is obviously very slow. I implemented <code>shouldComponentUpdate</code> on the <code>Pixel</code> component to speed things up a little, but this is still not very fast, since every <code>Pixel</code> is tested for changes.</p>
  
  <p>My first reaction was to manually change the pixel's inline CSS in the DOM through React refs and not keep the pixel state in this.state.pixels, but in this.pixels, so a state change doesn't cause re-rendering, but it seems like a bad to maintain the visual representation "manually".</p>
  
  <p>So, how would you implement such a functionality with React?</p>