title: Shouldn't React-native render only changed components similar to how React works?
body: <p>I am new to the React scene but I am fairly familiar with its structure and at the very least how to make simple webapps using it but this got me scratching my head for hours</p>
  
  <p>I am making a Tic Tac Toe using React-native, I currently experiment only on Android. These are the parts from my code that I think explains my situation</p>
  
  <pre><code>import Tile from "./Tile"
  
  export default class Playground extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              board: [["?", "?", "?"], ["?", "?", "?"], ["?", "?", "?"]],
              turn: "X"
          }
      }
  
      move(x, y) {
          if (this.state.board[x][y] == "?") {
              var currentTurn = this.state.turn
              var currentBoard = this.state.board
              currentBoard[x][y] = this.state.turn
              this.setState({board: currentBoard});
              //this.isGameOver(x, y);
          }
      }
  
      isGameOver(x, y) {
          //Game Over Test
      }
  
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;View style={styles.row}&gt;
                      &lt;Tile onPress={this.move.bind(this, 0, 0)} icon={this.state.board[0][0]}/&gt;
                      &lt;Tile onPress={this.move.bind(this, 0, 1)} icon={this.state.board[0][1]}/&gt;
                      &lt;Tile onPress={this.move.bind(this, 0, 2)} icon={this.state.board[0][2]}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.row}&gt;
                      &lt;Tile onPress={this.move.bind(this, 1, 0)} icon={this.state.board[1][0]}/&gt;
                      &lt;Tile onPress={this.move.bind(this, 1, 1)} icon={this.state.board[1][1]}/&gt;
                      &lt;Tile onPress={this.move.bind(this, 1, 2)} icon={this.state.board[1][2]}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.row}&gt;
                      &lt;Tile onPress={this.move.bind(this, 2, 0)} icon={this.state.board[2][0]}/&gt;
                      &lt;Tile onPress={this.move.bind(this, 2, 1)} icon={this.state.board[2][1]}/&gt;
                      &lt;Tile onPress={this.move.bind(this, 2, 2)} icon={this.state.board[2][2]}/&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          )
      }
  }
  </code></pre>
  
  <p>And of course the code for the tiles</p>
  
  <pre><code>export default class Tile extends React.Component {
      constructor(props) {
          super(props)
      }
  
      rand() {
          return Math.random() * 256;
      }
  
      randColor() {
          return "rgb(" + this.rand() + " ," + this.rand() + " ," + this.rand() + ")";
      }
  
      determineIcon() {
          if (this.props.icon == "X") {
              return (&lt;Text&gt;O&lt;/Text&gt;)
          } else if (this.props.icon == "O") {
              return (&lt;Text&gt;X&lt;/Text&gt;)
          } else {
              return null;
          }
      }
  
      render() {
          console.log("Things are happening!")
          return (
              &lt;TouchableHighlight onPress={this.props.onPress} underlayColor={this.randColor()}&gt;
                  &lt;View style={[styles.square, {backgroundColor: this.randColor()}]}&gt;
                      {this.determineIcon()}
                  &lt;/View&gt;
              &lt;/TouchableHighlight&gt;
          )
      }
  }
  </code></pre>
  
  <p>So what I noticed at first was that every time I clicked on a tile and it was successfully changed to an X ALL colours were regenerated again which made me realise that my app is re-rendering everything.</p>
  
  <p>So I thought it was the fault of that random function and decided to have all squares be orange, but I wanted to know whether it was still re-rendering everything or just the tile I pressed, so I put that console log to see how many times is the rendering happening and to my dismay it happened 9 times.</p>
  
  <p>I ended up removing the the onPress and icon properties from the 8 last tiles and turning them into completely static objects and changing board into a simple Boolean that I passed to the first tile. But no, it still rendered all 9 elements, again!</p>
  
  <p>Can someone please explain to me, Shouldn't React-native render only changed components similar to how React works?</p>