Is there a way to not re render tab content once you enter and go back after clicking another tab. The thing is that is always re render when I go to the other tab and i go back. I dont know if the solution may be related with pure components and shouldComponentUpdate but i don't know in which way use them This is my code:
constructor() {
super();
this.state = {
user: null,
isLoaded: false,
isLoadedMyPosts: false,
tabSelected: 1,
myPosts: [],
favoritesPosts: []
}
}
componentWillMount() {
storage.load({
key: "user",
}).then(userLocal => {
//Para tener la ultima informacion en los contadores
API.getUser(userLocal._id).then((data) => {
this.setState({ user: data[1], isLoaded: true })
})
API.getPostsByUser(userLocal._id).then((data) => {
this.setState({ myPosts: data, isLoadedMyPosts: true })
})
}).catch(err => {
// leave user null
this.setState({ isLoaded: true, isLoadedMyPosts: true })
return;
})
}
changeTab(value) {
switch (value) {
case 1:
this.setState({ tabSelected: 1 })
break;
case 2:
this.setState({ tabSelected: 2 })
storage.load({
key: "favorites",
}).then(favs => {
if (favs && favs.length) {
this.setState({ favoritesPosts: favs });
} else {
this.setState({ favoritesPosts: null });
}
}).catch(err => {
this.setState({ favoritesPosts: null });
return;
})
break;
}
}
And this is the important part of my render
{!this.state.isLoadedMyPosts &&
<View style={styles.loadingPosts}>
<ActivityIndicator size="large" color="#F5DA49" />
</View>
}
{this.state.isLoadedMyPosts && this.state.tabSelected === 1 &&
//this.state.myPosts.map((item, index) => {
// return (<PostItem key={item._id} item={item} isTabFavorites={false} />)
// })
<FlatList
data={this.state.myPosts}
renderItem={({ item, separators }) => (
<PostItem key={item._id} item={item} isTabFavorites={false} />
)}
keyExtractor={item => item._id}
onEndReachedThreshold={0.5}
/>
}
{this.state.isLoadedMyPosts && this.state.myPosts.length === 0 &&
<View style={styles.noPosts}>
<Icon name="md-alert" size={40} />
<Text style={styles.textNoPosts}> {!this.state.user ? "Necesitas iniciar sesión" : "No tienes públicaciones"}</Text>
</View>
}
{this.state.isLoadedMyPosts && this.state.tabSelected === 2 && this.state.favoritesPosts &&
this.state.favoritesPosts.map((item, index) => {
return (<PostItem key={item._id} item={item} isTabFavorites={true} removedFav={this.removedFav.bind(this)} />)
})}
{this.state.isLoadedMyPosts && !this.state.favoritesPosts && this.state.tabSelected === 2 &&
<View style={styles.noPosts}>
<Icon name="md-alert" size={40} />
<Text style={styles.textNoPosts}> No tienes favoritos</Text>
</View>
}