title: How do I reset a screens state to its initial state when using react navigation?
body: <p>I want to reset the state (back to initial state) in a functional component when navigated via <code>navigation.navigate()</code>.</p>
  <p>Say a user navigates to an <code>A</code> screen and some state is set, then they click a button on that screen and navigate to a <code>B</code> screen via <code>navigation.navigate('B</code>);`</p>
  <p>The problem Im having appears when the user clicks another button to go back to the <code>A</code> screen (again via <code>navigation.navigate('A');</code>). The <code>A</code> component at this point is still holding all the state from its initial mount. I want the state to be reset to the initial state for the <code>A</code> component so users have to start whatever process over again from the beginning.</p>
  <p>Is there a way to accomplish this? I attempted some half measure of listening for that navigation back and resetting the state with a bunch of <code>set</code> hooks, but it feels wrong and does not work very well.</p>
  <p>Edit:<br />
  Someone asked for a code sample, so a quick example is below. The problem is; if someone navigates to component <code>A</code> and clicks the button that calls <code>setInput</code> which makes text appear above the buttons, they then click the other button labeled <code>Go To B</code> which react navigation takes them to component <code>B</code>. If they then proceed and click <code>Go To A</code> and are then navigated back to component <code>A</code>, component <code>A</code> will still have the <code>input</code> state equal to <code>Hello</code>. I want it to be reset back to an empty string (hopefully without having to call <code>setInput(&quot;&quot;)</code>.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;;
  import {Center, Button, Text} from &quot;native-base&quot;;
  
  const A = ({ route, navigation }) =&gt; {
    const [input, setInput] = useState(&quot;&quot;);
  
    return (
      &lt;Center&gt;
        &lt;Text&gt;{input}&lt;/Text&gt;
        &lt;Button onPress=(() =&gt; { setInput(&quot;Hello&quot;) })&gt;Click Me For Words&lt;/Button&gt;
        &lt;Button onPress=(() =&gt; { navigation.navigate(&quot;B&quot;) })&gt;Go To B&lt;/Button&gt;
      &lt;/Center&gt;
    );
  };
  
  const B = ({ route, navigation }) =&gt; {
    return (
      &lt;Center&gt;
        &lt;Button onPress=(() =&gt; { navigation.navigate(&quot;A&quot;) })&gt;Go To A&lt;/Button&gt;
      &lt;/Center&gt;
    );
  };
  </code></pre>