title: React hooks useState initialization does not reset the state
body: <p>so I have a common component with a piece of state that should be initialized with a different value every time I visit another page. Right here I will be labeling my different pages as page A, and B.</p>
  <p>in the component I have a initialization function to initialize the state such as below:</p>
  <pre><code>const stateInit = (inputArray) =&gt; {
    const initializedValue = {};
    // Do some condition logic to store initial value into the const variable
  
    // log to see the changes
    console.log(&quot;initializedValue: &quot;, initializedValue);
  
    return initializedValue
  }
  </code></pre>
  <p>in my functional component, I have declare the state as follow:</p>
  <pre><code>const [myState, setMyState] = useState&lt;Object&gt;(stateInit(props.inputArray));
  
  // log to see the changes
  console.log(&quot;myState: &quot;, myState);
  </code></pre>
  <p>The <code>inputArray</code> will be different depending on which page of A, B I'm at.</p>
  <p>This issue only occurs when I go between pages A &lt;-&gt; B</p>
  <p>The expected behavior is when I switch between the two pages, the first console log will be the new value related to the page Im in, and the second console log has the state initialized with the new value related to the page.</p>
  <p>The actual behavior is when I switch between the two pages, the first console log will be the new value related to the page Im in, but the second console log has the state with the previous initialized value.</p>
  <p>I couldn't seem to figure out why the state is not initialized correctly. Does anyone have any clue about this?</p>