title: FlatList not updated if data updated
body: <p>I have a FlatList with data fetched from an API. There's a button on the screen that fetches data which is changed and sets the state, but the flat list doesn't refresh. I tried setting the extraData as per docs, but it didn't help. Here are the full code and snack. </p>
  
  <p>If you click the Toggle List button, the alert correctly shows the new data, but the list isn't updated. </p>
  
  <pre><code>import React, {useState} from 'react';
  import { SafeAreaView, View, FlatList, StyleSheet, Text, Button } from 'react-native';
  import Constants from 'expo-constants';
  
  const DATA2 = [
    {
      id: 0,
      title: 'D2-0'
    },
    {
      id: 1,
      title: 'D2-1'
    },
    {
      id: 2,
      title: 'D2-2'
    },
  ];
  
  const DATA1 = [
    {
      id: 0,
      title: 'D1-0'
    },
    {
      id: 1,
      title: 'D1-1'
    },
    {
      id: 2,
      title: 'D1-2'
    },
  ];
  
  export default function App(props) {
    const [data, setData]=useState(DATA1);
    const [dataUsed, setDataUsed]=useState(1);
  
    return (
      &lt;SafeAreaView style={styles.container}&gt;
        &lt;FlatList
          data={data}
          renderItem={({ item }) =&gt; &lt;MyComponent data={item} /&gt; }
          keyExtractor={item =&gt; item.id}
          extraData={data}
        /&gt;
        &lt;Button title="Toggle Data" onPress={() =&gt; {
          let newData = dataUsed === 1 ? DATA2 : DATA1;
          setDataUsed(dataUsed === 1 ? 2: 1);
          alert(JSON.stringify(newData));
          setData(newData);
        }} /&gt;
      &lt;/SafeAreaView&gt;
    );
  }
  
  class MyComponent extends React.Component {
    constructor(props){
      super(props);
      this.state = {data: props.data};
    }
    render() {
      return &lt;Text&gt;{this.state.data.title}&lt;/Text&gt;;
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Constants.statusBarHeight,
      padding: 50
    }
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-snack-id="SkDYPf4wH" data-snack-platform="web" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"&gt;&lt;/div&gt;
  &lt;script async src="https://snack.expo.io/embed.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>