Vfrdtyky

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>

        }