title: React Node in state keep remember props
body: <p>I have trouble debugging this code.</p>
  
  <p>I have an App component:</p>
  
  <pre><code>function App() {
    const [state, setState] = useState(0);
  
    const onSelectItem = () =&gt; {
      console.log(": onSelectItem -&gt; currentState", state);
    };
  
    // items is an array of ReactNode: button, when click on it. It will log the currentState.
    const items = ["FirstItem", "SecondItem"].map(item =&gt;  (
        &lt;button key={item} onClick={() =&gt; onSelectItem()}&gt;
          {item}
        &lt;/button&gt;
      );
    );
  
    return (
      &lt;div className="App"&gt;
        &lt;Menu items={items} /&gt;
        &lt;hr /&gt;
        &lt;button onClick={() =&gt; setState(prevState =&gt; prevState + 1)}&gt;Change State&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>My <code>Menu</code> components will receive <code>items</code> prop, and render it. It also has ability to set the active item. For simplicity's sake, I render a <code>button</code> to set activeItem to the first one. The active item will also be rendered.</p>
  
  <pre><code>  function Menu({ items }) {
        const [activeItem, setActiveItem] = useState(items[0]);
        return (
          &lt;div&gt;
            {items}
            &lt;hr /&gt;
            {activeItem}
          &lt;/div&gt;
        );
      }
  </code></pre>
  
  <p>Now, come to the main part:</p>
  
  <ul>
  <li>I press the button (before <code>hr</code>) => it shows currentState (OK)</li>
  <li>I press the <strong>active button</strong> (after <code>hr</code>) => it shows currentState (OK)</li>
  <li>I press change state button => the state now changes to 1 (OK)</li>
  <li>Now, if I press the button (before <code>hr</code> ) => It shows currentState is 1 (OK)</li>
  <li>But, if I press the <strong>active button</strong> (after <code>hr</code> ) => It still shows 0 (which is the last state) (???)</li>
  </ul>
  
  <p>My guess is React keeps remembering everything when using <code>useState</code>. But I'm not sure. Could anyone explain this for me!</p>
  
  <p>I also include the snippets for you to easily understand my problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {useState} = React;
  function Menu({ items }) {
    const [activeItem, setActiveItem] = useState(items[0]);
    return (
      &lt;div&gt;
        {items}
        &lt;hr /&gt;
        &lt;span&gt;Active Item:&lt;/span&gt;
        {activeItem}
      &lt;/div&gt;
    );
  }
  
  function App() {
    const [state, setState] = useState(0);
    console.log(state);
    const onSelectItem = () =&gt; {
      console.log(": onSelectItem -&gt; currentState", state);
    };
    const items = ["FirstItem", "SecondItem"].map(item =&gt; {
      return (
        &lt;button key={item} onClick={() =&gt; onSelectItem()}&gt;
          {item}
        &lt;/button&gt;
      );
    });
    return (
      &lt;div className="App"&gt;
        &lt;Menu items={items} /&gt;
        &lt;hr /&gt;
        &lt;button onClick={() =&gt; setState(prevState =&gt; prevState + 1)}&gt;Change State&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="react"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>