title: How to avoid react rerendering whole tree on simple className changes?
body: <p>I have some nested React components, the inner of which is a large <code>svg</code> graph with hundreds if not thousands <code>line</code> and <code>rect</code> elements. To enable some application-wide behaviour and appearance changes I thought to change the <code>className</code> of the uppermost component. The problem is, that the whole application re-renders if I do that.</p>
  
  <p>I understand that this behaviour is somewhat intended, in the sense of a unidirectional render flow, but I thought React would be smarter about what it can reuse and keep DOM changes to a minimum.</p>
  
  <p>Minimal example here: <a href="https://jsbin.com/rabofewawu/1/edit?html,js,output" rel="nofollow">https://jsbin.com/rabofewawu/1/edit?html,js,output</a>
  As you can see, the line pattern in the SVG changes every time you press 'here' though I only want the background color to change.</p>
  
  <p>A similar, but more extreme, example arises when I try to zoom and pan the <code>svg</code> by changing the <code>transform</code> property of an inner <code>g</code> element. Using d3, I simply change the attribute. With react, my <code>render</code> function gets called, the updated state results in an updated <code>transform</code> property, and the whole group is re-renderd from scratch instead of changing the DOM attribute.</p>
  
  <p>Am I missing something? Whats the React way to achieve what I'm trying to do?</p>