react-nativeflatlist

FlatList - Internal State

I've found in the Flatlist documentation this sentence :

Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.

I wrote a demo:

const Item = ({title}: {title: string}) => {
  const [n, setN] = useState(0);

  return (
    <TouchableOpacity
      onPress={() => setN(prev => prev + 1)}
      style={[styles.item]}>
      <Text style={[styles.title]}>
        {title}-{n}
      </Text>
    </TouchableOpacity>
  );
};

export default function List() {
  const renderItem = ({item}: {item: any}) => {
    return <Item title={item.title} />;
  };

  return (
    <FlatList
      data={MockListData}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
}

After I clicked on the first item multiple times, no matter how I swiped the screen, the first item did not reset its state. Its value has always been "Tab A Item 1-13" enter image description here

I'm confused. I want to know why the state has not been reset when it scrolls out of the render window.

Could you provide me more informations about this particular point ? Thanks for your time.

Solution

  • the default value of initialNumToRender is 10, and the windowSize is 21