ItemSeparatorComponent React Native

Question

So, i'm using a separator in a flatlist. I linked the separator to a logging function that logs the key of each item in the flatlist. When i reload the app, the first 10 items are logged, then the first 20, etc... In fact every 10 items, the iteration restart and all items from the beginning are logged. But if i just save the code, the app is refreshed and all items are logged just once as i expected.

here is my code:

import React from 'react';
import { Text, View, StyleSheet, TextInput, FlatList } from 'react-native';
import { Constants } from 'expo';
import { useState} from "react";

export default function App() {
  const [reviews, setReviews] = useState([
    {key:'1'},
    {key:'2'},
    {key:'3'},
    {key:'4'},
    {key:'5'},
    {key:'6'},
    {key:'7'},
    {key:'8'},
    {key:'9'},
    {key:'10'},
    {key:'11'},
    {key:'12'},
    {key:'13'},
    {key:'14'},
    {key:'15'},
    {key:'16'},
    {key:'17'},
    {key:'18'},
    {key:'19'},
    {key:'20'},
    {key:'21'},
    {key:'22'},
    {key:'23'},

  ])
  const separator=(e)=>{
    console.log(e.leadingItem.key)
  }
  return (
      <View >
        <FlatList
          ItemSeparatorComponent={(e)=>separator(e)}
          data={reviews}
          renderItem={({item}) => (
            <Text>{item.key}</Text>
          )}
        />
        
      </View>
    )

}


});

here is the logs when the app is reloaded

log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 21
log : 22

here is the logs when the app is refreshed

log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 21
log : 22

Is this behavior avoidable? If not will this behavior persist in production mode?

Answer 1

If you want to render the ItemSeparatorComponent between every other set of items, rather than every 10 items, you can use the itemIndex prop passed to the ItemSeparatorComponent to determine when to render the separator. For example, you could use the following code to render the ItemSeparatorComponent between every other set of items:

 function MyItemSeparator({ itemIndex }) { if (itemIndex % 20 === 0) { return <View style={styles.separator} />; } return null; }

This code will render the ItemSeparatorComponent between every 20th item in the list (ie, between the 0th item, the 20th item, the 40th item, etc.). You can adjust the modulus operator (%) to change the frequency with which the separator is rendered.