OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to prevent a FlatList from re-rendering when state changes in react native

  • Thread starter Thread starter George Marwanqana
  • Start date Start date
G

George Marwanqana

Guest
I have a FlatList in my code that re-renders each time I make a state change (setMatchIndex state). I need it to not re-render, and I've tried memo, and useCallback, but can't figure out the problem. Please assist

Here's my code:

Code:
const Home = ()=>{

const [matchIndex, setMatchIndex] = useState(0);

return(
      <FlatList
        data={results}
        horizontal
        showsHorizontalScrollIndicator={false}
        renderItem={({item, index})=>{
          //we set the gradient colot of the component based on the component(index) clicked
          let firstColor = index === matchIndex ? COLORS.secondary : '#232232';
          let secondColor = index === matchIndex ? COLORS.secondary : '#232232';
            
          return (
              <TouchableOpacity activeOpacity={0.6} style={styles.liveGame} onPress={()=> setMatchIndex(index)}>
                <LinearGradient
                  colors={[firstColor, secondColor]}
                  start={{x: 0, y: 1}}
                  end={{x: 1, y: 1}}
                  style={{height: '100%', width: '100%', borderRadius: 20,}}
                >
                  <View style={styles.tournamentContainer}>
                    <View style={styles.tournamentIconWrapper}>
                      <Image source={item.fixture.tournament} resizeMode='contain' style={styles.tournamentIcon}/>
                    </View>
                  </View>
                  <View style={styles.liveTeamsContainer}>
                    <Image source={item.teams.home.logo} resizeMode='contain' style={styles.liveTeam}/>
                    <Image source={item.teams.away.logo} resizeMode='contain' style={styles.liveTeam}/>     
                  </View>
                  <Text style={styles.liveTeamName}>{item.teams.home.name}   {item.teams.home.score}</Text>
                  <Text style={styles.liveTeamName}>{item.teams.away.name}   {item.teams.away.score}</Text>
                </LinearGradient>
      
              </TouchableOpacity>
          )
        }}
        keyExtractor={(item , index) => index }
      />

)

}

<p>I have a FlatList in my code that re-renders each time I make a state change (setMatchIndex state).
I need it to not re-render, and I've tried memo, and useCallback, but can't figure out the problem. Please assist</p>
<p>Here's my code:</p>
<pre><code>const Home = ()=>{

const [matchIndex, setMatchIndex] = useState(0);

return(
<FlatList
data={results}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={({item, index})=>{
//we set the gradient colot of the component based on the component(index) clicked
let firstColor = index === matchIndex ? COLORS.secondary : '#232232';
let secondColor = index === matchIndex ? COLORS.secondary : '#232232';

return (
<TouchableOpacity activeOpacity={0.6} style={styles.liveGame} onPress={()=> setMatchIndex(index)}>
<LinearGradient
colors={[firstColor, secondColor]}
start={{x: 0, y: 1}}
end={{x: 1, y: 1}}
style={{height: '100%', width: '100%', borderRadius: 20,}}
>
<View style={styles.tournamentContainer}>
<View style={styles.tournamentIconWrapper}>
<Image source={item.fixture.tournament} resizeMode='contain' style={styles.tournamentIcon}/>
</View>
</View>
<View style={styles.liveTeamsContainer}>
<Image source={item.teams.home.logo} resizeMode='contain' style={styles.liveTeam}/>
<Image source={item.teams.away.logo} resizeMode='contain' style={styles.liveTeam}/>
</View>
<Text style={styles.liveTeamName}>{item.teams.home.name} {item.teams.home.score}</Text>
<Text style={styles.liveTeamName}>{item.teams.away.name} {item.teams.away.score}</Text>
</LinearGradient>

</TouchableOpacity>
)
}}
keyExtractor={(item , index) => index }
/>

)

}

</code></pre>
 

Latest posts

Top