title: React-Native Flatlist all Flatlist Rerender on one Item Selection
body: <p>I'm building a React-Native app and trying to optimize it, i runned into the case of my Flatlist.</p>
  <p>So this Flatlist basically renders few elements and each of these elements are selectable.
  The issue i'm facing is that selecting one single item rerenders the whole Flatlist, and thus all items it contains.</p>
  <p>I've seen a lot of solutions online already, and tried them without any success.</p>
  <p>Here is my code :</p>
  <p><strong>Class component containing the Flatlist</strong></p>
  <pre><code>
  const keyExtractor = (item) =&gt; item.id
  
  export default class OrderedList extends Component {
  
      state = {
          selected: null,
      }
  
       onPressSelect = (id) =&gt; {
           console.log(this.state.selected)
           if(this.state.selected === id) {
               this.setState({ selected: null})
           } 
           else {
               this.setState({ selected: id})
           }
       }
  
  
      renderItemOrdered = ({item}) =&gt; {
  
          const { group, wording, description, id: uniqueID } = item
          const { id, name } = group
  
          return (
              &lt;CategoryCard
              type=&quot;ordered&quot;
              // item={item}
              uniqueID={uniqueID}
              groupName={name} 
              groupID={id} 
              description={description} 
              title={wording}
              selected={this.state.selected}
              onPressSelect={() =&gt; this.onPressSelect(item.id)}
              /&gt;
          )
      }
  
      render() {
      return (
          &lt;FlatList 
          initialNumToRender={10}
          maxToRenderPerBatch={10}
          data={this.props.data}
          renderItem={this.renderItemOrdered}
          keyExtractor={keyExtractor}
          extraData={this.state.selected} ---&gt; Tried with and without it
          /&gt;
        )
      }
  
  }
  </code></pre>
  <p><strong>Class component containing the renderItem method</strong></p>
  <pre><code>export default class CategoryCard extends Component {
  
      shouldComponentUpdate = (nextProps, nextState) =&gt; {
        return nextProps.selected !== this.props.selected &amp;&amp;
          nextProps.onPressSelect !== this.props.onPressSelect
      }
  
  
  render(){
      if(this.props.type === 'ordered') {
        return (
          &lt;Pressable style={this.props.selected === this.props.uniqueID ? styles.cardContainerSelected : styles.cardContainer} onPressIn={this.props.onPressSelect}&gt;
  
            &lt;View style={[styles.cardHeader, backgroundTitleColor(this.props.groupID)]}&gt;
                &lt;Text style={[styles.cardGroupName, textTitleColor(this.props.groupID)]}&gt;{this.props.groupName}&lt;/Text&gt;
            &lt;/View&gt;
  
  
            &lt;View style={styles.cardContent}&gt;
                &lt;Text style={styles.cardTitle}&gt;{this.props.wording}&lt;/Text&gt;
                &lt;Text style={styles.cardDescription} numberOfLines={3} ellipsizeMode=&quot;tail&quot;&gt;{this.props.description}&lt;/Text&gt;
            &lt;/View&gt;
  
          &lt;/Pressable&gt;
        )
      }
  }
  
  }
  </code></pre>
  <p>What i already tried :</p>
  <p>At first my components were functional components so i changed them into class components in order to make things works. Before that, i tried to use React.memo, also to manually add a function <code>areEqual</code> to it, to tell it when it should rerender, depending on props.
  It didn't give me what i wanted.
  I also tried to put all anonymous functions outside return statements, made use of useCallback, played around the ShouldComponentUpdate (like adding and removing all the props, the onPress prop, selected props)... None of that worked.</p>
  <p>I must be missing something somewhere.. If you can help me with it, it would be a big help !</p>