title: Why cant we reuse State Modifiers?
body: <p>I am just trying to understand famo.us and wondering why we cant reuse <code>StateModifier</code> instance when the values are the same.</p>
  
  <pre><code>var rotateModifierOne = new StateModifier({
    transform: Transform.rotateZ(Math.PI/4)
  });
  
  var rotateModifierTwo = new StateModifier({
    transform: Transform.rotateZ(Math.PI/4)
  });
  </code></pre>
  
  <p>As seen here: <a href="http://famo.us/university/famous-101/positioning/4/" rel="nofollow">http://famo.us/university/famous-101/positioning/4/</a></p>
  
  <p>Why cant we just do</p>
  
  <pre><code>var mainContext = Engine.createContext();
  
  var translateModifier = new StateModifier({
    transform: Transform.translate(200, 0, 0)
  });
  
  var rotateModifier = new StateModifier({
    transform: Transform.rotateZ(Math.PI/4)
  });
  
  var redSurface = new Surface({
    size: [100, 100],
    classes: ['red-bg']
  });
  
  var greySurface = new Surface({
    size: [100, 100],
    classes: ['grey-bg']
  });
  
  mainContext
    .add(translateModifier)
    .add(rotateModifier)
    .add(redSurface);
  
  mainContext
    .add(rotateModifier)
    .add(translateModifier)
    .add(greySurface);
  </code></pre>
  
  <p>Why do we need separate instances when the values are the same? I am expecting the answer  to help me understand how State Modifiers are consumed.</p>