Potentially confusing extraData flatlist docs

The current example for using extraData in the flatList does not actually require the extraData prop at all. This commit is to contrive an example where extraData in the flatList makes a difference.

The existing example runs fine without the extraData prop at all because the functional component re-creates the renderItem function reference on every call to the App function when the selectId state is set. Since the renderItem reference changes to the flatList, it re-renders. In the functional paradigm data needs to be passed to the renderItem method by reference in order to create the need for extraData.

Author: kafischer

docs/flatlist.md

@@ -88,7 +88,7 @@ More complex, selectable example below.
 - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
 
 ```SnackPlayer name=flatlist-selectable
-import React, { useState } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity } from "react-native";
 
 const DATA = [
@@ -113,29 +113,37 @@ const Item = ({ item, onPress, backgroundColor, textColor }) => (
 );
 
 const App = () => {
-  const [selectedId, setSelectedId] = useState(null);
-
-  const renderItem = ({ item }) => {
-    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
-    const color = item.id === selectedId ? 'white' : 'black';
+  const [extraData, setExtraData] = useState(null);
+  const selectIdRef = useRef();
+
+  const renderItem = useCallback(({ item }) => {
+    const backgroundColor =
+      item.id === selectIdRef.current ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectIdRef.current ? 'white' : 'black';
+    const onPress = () => {
+      selectIdRef.current = item.id;
+      setExtraData(item.id);
+    };
 
     return (
       <Item
         item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={{ backgroundColor }}
-        textColor={{ color }}
+        onPress={onPress}
+        backgroundColor={{backgroundColor}}
+        textColor={{color}}
       />
     );
-  };
+  }, []);
+
+  const keyExtractor = useCallback(item => item.id, []);
 
   return (
     <SafeAreaView style={styles.container}>
       <FlatList
         data={DATA}
         renderItem={renderItem}
-        keyExtractor={(item) => item.id}
-        extraData={selectedId}
+        keyExtractor={keyExtractor}
+        extraData={extraData}
       />
     </SafeAreaView>
   );