title: React Navigation Mounts with Previous Navigation Params, then New Params
body: <p>We are seeing a strange behavior in our React Native + React Navigation application, so we've created a simple example to demonstrate. </p>
  
  <p>We have 2 screens: A and B. </p>
  
  <p>On Screen A, there are two buttons that each navigate to Screen B. The first button passes parameter id:1, the second passes id:2. </p>
  
  <p>On Screen B we are console logging the inbound parameter in both the render() method and componentDidMount() method.</p>
  
  <p>If I click the button with id:1 on Screen A, the parameter output on Screen B is corrected logged as id:1 in both render() and componentDidMount(). However if I then navigate back and very quickly click the button with id:2, the logged output is first shown as id:1, then as id:2. In the following order:</p>
  
  <p><strong>First click:</strong></p>
  
  <p>render: 1 </p>
  
  <p>componentDidMount: 1</p>
  
  <p>(then back, then <em>quickly</em>:)</p>
  
  <p><strong>Second click</strong></p>
  
  <p>render: 1</p>
  
  <p>render: 2</p>
  
  <p>componentDidMount: 1</p>
  
  <p>componentDidMount: 2</p>
  
  <p>It would seem that the ghost of the previously mounted component is still haunting our application. Moreover, it feels like a race condition because you have to click quickly to summon the ghost, a slow click will not cause this behavior.</p>
  
  <p>Here is the whole of the application:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { View, Text, TouchableOpacity } from 'react-native'
  import { StackNavigator } from 'react-navigation'
  class ScreenA extends React.Component {
    render() {
      const { navigation } = this.props;
      return (      
        &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;TouchableOpacity style={{ marginVertical: 12, padding: 32, borderWidth: 1 }} 
            onPress={() =&gt; { navigation.navigate( 'ScreenB', { id: 1 })}}&gt;
            &lt;View style={{ }}&gt;&lt;Text&gt;Button 1&lt;/Text&gt;&lt;/View&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={{ marginVertical: 12, padding: 32, borderWidth: 1 }} 
            onPress={() =&gt; { navigation.navigate( 'ScreenB', { id: 2 })}}&gt;
            &lt;View style={{ }}&gt;&lt;Text&gt;Button 2&lt;/Text&gt;&lt;/View&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      )
    }
  }
  class ScreenB extends React.Component {
    componentDidMount(){
      console.log('%c componentDidMount: '+this.props.navigation.state.params.id, 'padding: 2px; background: blue; color: #fff')
    }
    render() {
      console.log('%c render: '+this.props.navigation.state.params.id, 'padding: 2px; background: green; color: #fff')
      return (   
        &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;TouchableOpacity style={{ padding: 16 }} onPress={() =&gt; this.props.navigation.goBack()}&gt;
            &lt;View style={{ }}&gt;&lt;Text&gt;Button&lt;/Text&gt;&lt;/View&gt;
          &lt;/TouchableOpacity&gt;        
        &lt;/View&gt;
      )
    }
  }
  const Router = StackNavigator({
    ScreenA: { screen: ScreenA },
    ScreenB: { screen: ScreenB }
  })
  export default class App extends React.Component {
    render() {
      return (
        &lt;Router /&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also here is a Snack:</p>
  
  <p><a href="https://snack.expo.io/@makerepeat/navigation-bugs" rel="nofollow noreferrer">https://snack.expo.io/@makerepeat/navigation-bugs</a></p>
  
  <p>... and the package.json:</p>
  
  <pre><code>{
    "name": "rn2-test2",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
      "react-native-scripts": "1.14.0",
      "jest-expo": "~27.0.0",
      "react-test-renderer": "16.3.1"
    },
    "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
    "scripts": {
      "start": "react-native-scripts start",
      "eject": "react-native-scripts eject",
      "android": "react-native-scripts android",
      "ios": "react-native-scripts ios",
      "test": "jest"
    },
    "jest": {
      "preset": "jest-expo"
    },
    "dependencies": {
      "expo": "^27.0.1",
      "react": "16.3.1",
      "react-native": "~0.55.2",
      "react-navigation": "^1.5.12"
    }
  }
  </code></pre>