title: React native router flux; slow to load back to previous component
body: <p>I'm using react-native-router-flux in my Card component to to link to my playerPage component.</p>
  
  <p>This is my Card component:</p>
  
  <pre><code>class Card extends Component {
    state = {
      visible: false,
      currentUser: ''
    }
  
    componentDidMount() {
      if(this.props.player !== undefined){
        axios.get(`http://localhost:4000/reports?players=${this.props.player}&amp;startDate=2019-03-20T03:10:43.990Z&amp;sort=date`)
        .then(response =&gt; {
            console.log(response)
            this.props.loadCards(response.data)
        })
      } else if(this.props.team !== undefined) {
        axios.get(`http://localhost:4000/reports?team=${this.props.team}&amp;startDate=2019-03-20T03:10:43.990Z&amp;sort=date`)
        .then(response =&gt; {
            console.log(response)
            this.props.loadCards(response.data)
        })
      } else if(this.props.league !== undefined) {
        console.log('got here')
        axios.get(`http://localhost:4000/reports?league=${this.props.league}&amp;startDate=2019-03-20T03:10:43.990Z&amp;sort=date`)
        .then(response =&gt; {
            console.log(response)
            this.props.loadCards(response.data)
        })
      } else {
        axios.get(`http://localhost:4000/reports?league=NBA&amp;league=NFL&amp;league=MLB&amp;startDate=2019-03-20T03:10:43.990Z&amp;sort=date`)
                    .then(response =&gt; {
                        this.props.loadCards(response.data)
                    })
        Auth.currentAuthenticatedUser()
        .then((data) =&gt; {
            this.props.loadFilters(data.attributes.sub)
            this.setState({currentUser: data})
        })
      }
  
    }
  
    render() {
  
      let cardValues = this.props.search === null ? this.props.card : this.props.search
  
      return (
          &lt;View &gt;
            { 
              cardValues != null ?
                cardValues.map((v,i) =&gt; {
                  return(
                  &lt;View key={i}&gt;
                    &lt;Collapse 
                    &gt;
                      &lt;CollapseHeader
                      &gt;
                        &lt;View&gt;
                          &lt;Text&gt;
                            &lt;Icon 
                              name={this.iconName(v.player.team.league.acronym)}
                              size={12}
                              color='black'/&gt;{'   '}
                            &lt;Text
                              onPress={
                                ()=&gt; {
                                  Actions.playerPage({
                                    player: v.player._id
                                  })
                                }
                              }
                              &gt;{v.player.player_name} - &lt;/Text&gt;
                          &lt;/Text&gt;
                          &lt;Text&gt;
                          &lt;View&gt;
                          &lt;/View&gt;
                        &lt;/View&gt;
                        &lt;View&gt;
                        &lt;/View&gt;
                      &lt;/CollapseHeader&gt;
                    &lt;/Collapse&gt;
                &lt;/View&gt;
                  )
                })
            : null
            }
          &lt;/View&gt;
      )
    }
  
  }
   export default connect(mapStateToProps, { loadCards, countMore, loadFilters })(Card))
  </code></pre>
  
  <p>This is my playerPage component:</p>
  
  <pre><code>PlayerPage = (props) =&gt; { 
      return(
          &lt;View&gt;
              &lt;Header
                  rounded
              &gt;
                  &lt;View style={{flexDirection: 'row', flexWrap: 'wrap', right: '43%', top: '50%', paddingBottom: 900}}&gt;
                      &lt;Icon name='chevron-left' size={10} color='#006FFF' /&gt;
                      &lt;NativeText
                          onPress={() =&gt; {Actions.fullApp()}}
                          style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular', top: '900%' }}
                      &gt;
                          Back
                      &lt;/NativeText&gt;
                  &lt;/View&gt;
              &lt;/Header&gt;
              &lt;Card
                  player={props.player}
                  team={props.team}
                  league={props.league}
              /&gt;
          &lt;/View&gt;
      )
  }
  
  export default PlayerPage
  </code></pre>
  
  <p>When I link to playerPage I render a new version of Card on playerPage.</p>
  
  <p>The data that is shown on playerPage is determined by the API call in the componentDidMount of the Card component.</p>
  
  <p>I initially direct to playerPage with <code>onPress={ ()=&gt; {Actions.playerPage({player: v.player._id})}}</code></p>
  
  <p>This loads fine.</p>
  
  <p>When I direct a user back to the fullApp component, which has the Card component on it, the data loads, but much more slowly.</p>
  
  <p>This is what it looks like:
  <a href="https://streamable.com/ugc0b" rel="nofollow noreferrer">https://streamable.com/ugc0b</a></p>
  
  <p>Any ideas why it loads slowly? That's my issue.</p>