title: Re-render flat-list in functional component
body: <p>I have an empty array that I pass to my <code>flat-list</code>.
  I also use <code>useEffect</code> to fetch data from the server and update the list.
  However, after setting the new state of the array with the data, the <code>flat-list</code> is not re-rendered.</p>
  <pre><code>const [listData, setlistData] = React.useState&lt;Transaction[]&gt;([])
  const [dataUpdated, setDataUpdated] = React.useState&lt;boolean&gt;(false)
  
  React.useEffect(() =&gt; {
  
      if(route.params.showAllData)
      {
          fetchTransactions(1, TRANSACTION_PAGE_SIZE, 1)
              .then((res: Transaction) =&gt; {
                  console.log(`TransactionsScreen: userEffect [] =&gt; fetched ${JSON.stringify(res)}`);
                  setlistData(prevState =&gt; ({...prevState, ...res}));
                  setDataUpdated(true)
              })
              .catch(err =&gt; {
  
                  //TODO: handle error scenerio
                  ToastAndroid.show(`Failed to fetch transacrions`, ToastAndroid.SHORT)
                  
              })
      }}, [])    
  
  &lt;FlatList
       data={listData}
       renderItem={item =&gt; _renderItem(item)}
       ItemSeparatorComponent={TransactionListSeparator}
       extraData={dataUpdated} // extraData={listData &lt;--- didn't work either}
       keyExtractor={item =&gt; item.id.toString()}/&gt;
  </code></pre>
  <p>I tried to add the data array as <code>extraData</code> value but it didn't work, I also tried to add another boolean notifying that the data was updated but it didn't work either.</p>
  <p>How can re-render the <code>flat-list</code> correctly?</p>