React Native Horizontal Flatlist - Re-renders entire list on scroll?

Question

So I'm not sure if I've implemented Flatlist correctly here but every time I scroll to the right (horizontal flatlist, with one item per page), the entire list of items seems to be re-rendered (I verified this by using a console.log in the renderItem). I have also noticed the below warning:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

The data is being populated via props from the parent component, which in turn is obtained via an API call. If I have < 10 items, this re-rendering doesn't seem to happen though.

Appreciate your help. Code below

App.js

export default function App() {
  const [ state, setState ] = useState({
    sideMenuOpen: false,
    comingSoon: null
  })

  useEffect(() => {
    (async () => setState({comingSoon: await getComingSoon()}))()
  }, [])

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.background}>
        <Background />
      </View>
      <ScrollView>
        <View >
          <Swiper header={'Movies & TV: Coming Soon'} interval={6000} data= 
           {state.comingSoon} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

Swiper.js

class Item extends React.PureComponent {
  componentDidMount() {
    console.log('component mount', this.props.index)
  }

  componentWillUnmount() {
    console.log('component unmount', this.props.index)
  }

  componentDidUpdate(prevProps) {
    console.log('component update')
  }

  render() {
    const { content } = this.props
    return (
      <View style={styles.item}>
        <Text style={styles.contentTitle}>{content.title}</Text>
        <View style={styles.contentTextContainer}>
          <Text style={styles.contentText}>content.castList} 
          </Text>
          <Text style={styles.contentText}>{content.releaseDate}</Text>
        </View>
      </View>
    )
  }
}

const Slider = props => {

  const renderItem = ({ item }) => {
    return <Item content={item} />
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={props.data}
        pagingEnabled={true}
        horizontal={true}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  )
}

Output As you can see from the image, every time I scroll (example from index 10 -> 11), it unmounts the previous 10 and mounts the previous 11. This is clearly not performant and how it should work? Appreciate your help.

Answer 1

maybe a problem with your container styles around FlatList, if it's allowed to expand horizontally then it will render all items. it needs to be limited in width to only render the visible items.