title: FlatList re-rendering every time i type something in TextInput
body: <p>I don't think this is a bug, more like I'm doing something wrong but here it goes.
  I'm building a Chat Component for my application, it's very simple, I type something press send button adds to the list and displays.
  Days ago I found that if I started typing big and quick messages my JS FPS would drop to like 10, 5 even 1 and I found out today thanks to implementing a data/time display for the messages that each time I type something in the TextInput and run onChangeText event and change the state of "text" it re-renders ALL the items inside my FlatList</p>
  
  <p>Here is my code:</p>
  
  <p>Chat Component:</p>
  
  <pre><code>&lt;FlatList
      key={'chat'}
      ref={(ref) =&gt; {flatlistRef = ref}}
      style={styles.flatlist_main}
      data={this.state.items}
      extraData={this.state}
      renderItem={this.renderItem}
      keyExtractor={this.keyExtractor}
      onContentSizeChange={(contentWidth, contentHeight) =&gt; {
            flatlistRef.scrollToEnd({animated: true});
      }}
      onLayout={() =&gt; {flatlistRef.scrollToEnd({animated: true})}}
  /&gt;
  </code></pre>
  
  <p>onChangedText Function</p>
  
  <pre><code>onFooterTextChanged = (text) =&gt; {
      this.setState({
          text: text,
          options_expanded: false,
      });
  };
  </code></pre>
  
  <p>onSendMessage Button Function</p>
  
  <pre><code>onSendButtonPressed = () =&gt; {
      if(this.state.text !== null &amp;&amp; this.state.text !== "") {
          this.setState({
              items: [
                  ...this.state.items,
                  {
                      id: moment().valueOf(),
                      text: this.state.text,
                      date: moment().valueOf(),
                      user: {
                          id: globals.user_id_value,
                          avatar: globals.user_photo,
                      }
                  }
              ],
              text: "",
              options_expanded: true,
          });
      }
  };
  </code></pre>
  
  <p>renderItem Function for FlatList</p>
  
  <pre><code>renderItem = (item) =&gt; {
      const data = item.item;
      const renderAvatar = this.renderAvatar(item);
      const renderTime = this.renderTime(item);
      if('text' in data){
          return(
              &lt;ChatTextItem
                  keyy={data.id}
                  self={globals.user_id_value === data.user.id}
                  text={data.text}
                  user={data.user}
                  renderAvatar={renderAvatar}
                  sameUser={!renderAvatar}
                  renderTime={renderTime}
                  time={this.getTime(data.date)}
              /&gt;
          )
      } else if('image' in data) {
          return(
              &lt;ChatImageItem
                  keyy={data.id}
                  self={globals.user_id_value === data.user.id}
                  image={data.image}
                  renderAvatar={renderAvatar}
                  sameUser={!renderAvatar}
                  renderTime={renderTime}
                  time={this.getTime(data.date)}
              /&gt;
          )
      }
  };
  </code></pre>
  
  <p>Constructor if it helps</p>
  
  <pre><code>constructor(props){
      super(props);
      this.state = {
          isLoading: false,
          options_expanded: true,
          text: "",
          image: "",
          items: [],
      };
  }
  </code></pre>
  
  <p>and I'm user PureComponent btw.</p>
  
  <p>Edit #1: Console after typing like a madman in the TextInput
  <a href="https://i.stack.imgur.com/KjBWL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KjBWL.png" alt="enter image description here"></a>
  It re-rendered 28 times for the 28 letters I typed and it does that * the number of items in the list already</p>
  
  <p>Edit #2: Changes Made to the JS file</p>
  
  <p>Changed FlatList extraData option </p>
  
  <pre><code> &lt;FlatList
        key={'chat'}
        ref={(ref) =&gt; {flatlistRef = ref}}
        style={styles.flatlist_main}
        data={this.state.items}
        extraData={this.state.refresh}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
        onContentSizeChange={(contentWidth, contentHeight) =&gt; {
              flatlistRef.scrollToEnd({animated: true});
        }}
        onLayout={() =&gt; {flatlistRef.scrollToEnd({animated: true})}}
    /&gt;
  </code></pre>
  
  <p>and changed the constructor to add refresh state</p>
  
  <pre><code> constructor(props){
      super(props);
      this.state = {
          isLoading: false,
          options_expanded: true,
          text: "",
          image: "",
          items: [],
          refresh: false,
      };
  }
  </code></pre>
  
  <p>Issue still persists</p>
  
  <p>Edit: #3 Finally found the issue</p>
  
  <p><strong>Works</strong></p>
  
  <pre><code>&lt;FlatList
                  key={'chat'}
                  ref={(ref) =&gt; {flatlistRef = ref}}
                  style={styles.flatlist_main}
                  data={this.state.items}
                  extraData={this.state.refresh}
                  renderItem={this.renderItem}
                  keyExtractor={this.keyExtractor}
  
              /&gt;
  </code></pre>
  
  <p><strong>Doesn't Work</strong></p>
  
  <pre><code> &lt;FlatList
                  key={'chat'}
                  ref={(ref) =&gt; {flatlistRef = ref}}
                  style={styles.flatlist_main}
                  data={this.state.items}
                  extraData={this.state.refresh}
                  renderItem={this.renderItem}
                  keyExtractor={this.keyExtractor}
                  onContentSizeChange={(contentWidth, contentHeight) =&gt; {
                      flatlistRef.scrollToEnd({animated: true});
                  }}
                  onLayout={() =&gt; {flatlistRef.scrollToEnd({animated: true})}}
              /&gt;
  </code></pre>
  
  <p>Any Ideas Why? Please!</p>
  
  <p>If someone could help me find a solution to my problem I would appreciate it.</p>