title: React hooks: Issue with React.memo and useState
body: <p>I played around with react hooks, and I came across an issue that I do not understand.</p>
  
  <p>The code is here <a href="https://codesandbox.io/embed/hnrch-hooks-issue-dfk0t" rel="nofollow noreferrer">https://codesandbox.io/embed/hnrch-hooks-issue-dfk0t</a>
  The example has 2 simple components:</p>
  
  <p><strong>App Component</strong></p>
  
  <pre><code>const App = () =&gt; {
    const [num, setNum] = useState(0);
    const [str, setStr] = useState();
  
    const inc = () =&gt; {
      setNum(num + 1);
      setStr(num &gt;= 5 ? "&gt;= 5" : "&lt; 5");
      console.log(num);
    };
  
    const button = &lt;button onClick={inc}&gt;++&lt;/button&gt;;
  
    console.log("parent rerender", num);
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;App&lt;/h1&gt;
        &lt;Child str={str}&gt;{button}&lt;/Child&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>const Child = React.memo(
    ({ str, children }) =&gt; {
      console.log("child rerender");
      return (
        &lt;div&gt;
          &lt;&gt;
            &lt;h2&gt;Functional Child&lt;/h2&gt;
            &lt;p&gt;{str}&lt;/p&gt;
            {children}
          &lt;/&gt;
        &lt;/div&gt;
      );
    }
    (prev, props) =&gt; {
      return prev.str === props.str;
    }
  );
  </code></pre>
  
  <p>So I have the child wrapped in a <code>React.memo</code>, and it should only rerender if <code>str</code> is different. But is also has children, and it get's passed a button which is incrementing a counter inside the parent (App).</p>
  
  <p>The issue is: The counter will stop incrementing after it is set to 1. Can someone explain this issue to me and what I need to understand  to avoid those bugs?</p>