title: Can I change grandparent inline CSS without triggering a re-render?
body: <p>I'm trying to change a component's inline CSS by clicking one of its 10,000 grandchildren.</p>
  
  <p><code>World</code> passes a callback function to its child <code>Terrain</code>. This component creates a grid of 100 by 100 child components <code>Tile</code>. Each one has a position property, which can be passed to the callback, informing <code>World</code> to change its CSS so that the clicked <code>Tile</code> is moved to the center of the screen.</p>
  
  <p>The following code works, but is very slow. Apparently, <a href="https://stackoverflow.com/questions/39381736/react-setstate-flux-does-it-always-trigger-a-re-render"><code>setState</code> always triggers a re-render</a>. Because my <code>World</code> has 10,000 <code>Tile</code> grandchildren, the response of <code>World</code> moving on the screen is laggy.</p>
  
  <p>I've confirmed the lag is caused by the amount of elements, because creating a <code>Terrain</code> with only 4 <code>Tile</code> children makes the click response very snappy.</p>
  
  <p><strong>Since <code>setState</code> triggers a re-render, how else can I change <code>World</code>'s inline CSS based on which <code>Tile</code> is clicked?</strong></p>
  
  <pre><code>class World extends Component {
      // this function is passed down to Terrain
      changePosition( newPosition ) {
          this.setState({
              position : newPosition
          });
      }
  
      convertPosition( position ) {
          let x = ( this.tileSize / 2 ) + ( position.x * this.tileSize );
          let y = ( this.tileSize / 2 ) + ( position.y * this.tileSize );
          let translate = 'translate( ' + -x + 'px, ' + -y + 'px )';
          return translate;
      }
  
      render() {
          let terrainSize = {
              x : 100,
              y : 100
          };
          let style = {
              transform : this.convertPosition( this.state.position ),
              width     : terrainSize.x * this.tileSize,
              height    : terrainSize.y * this.tileSize
          };
          return (
              &lt;div className="world" style={ style }&gt;
                  &lt;Terrain
                      size={ terrainSize }
                      tileSize={ this.tileSize }
                      onTileClick={ this.changePosition.bind( this ) }
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  class Terrain extends Component {
      tileClicked( position ) {
          this.props.onTileClick( position );
      }
  
      render() {
          let tiles = [];
          // create 100 * 100 Tiles
          for( let x = 0; x &lt; this.props.size.x; ++x ) {
              for( let y = 0; y &lt; this.props.size.y; ++y ) {
                  let position = {
                      x : x,
                      y : y
                  };
                  tiles.push(
                      &lt;Tile
                          key={ x + ',' + y }
                          position={ position }
                          size={ this.props.tileSize }
                          onClick={ () =&gt; this.tileClicked( position ) }
                      /&gt;
                  );
              }
          }
          return (
              &lt;div className="terrain"&gt;
                  { tiles }
              &lt;/div&gt;
          );
      }
  }
  class Tile extends Component {
      render() {
          let style = {
              position : 'absolute',
              top      : this.props.position.y * this.props.size,
              left     : this.props.position.x * this.props.size,
              width    : this.props.size,
              height   : this.props.size
          };
          return (
              &lt;div className="tile" onClick={ this.props.onClick } style={ style }&gt;&lt;/div&gt;
          );
      }
  }
  </code></pre>