title: React memo creates rerender
body: <p>I'm having an issue with react memo when using nextjs. In the _app e.g. I have a button imported:</p>
  <pre><code>import { ChildComponent } from './ChildComponent';
  
  export const Button = ({ classN }: { classN?: string }) =&gt; {
    const [counter, setCounter] = useState(1);
    
    const Parent = () =&gt; {
       &lt;button onClick={() =&gt; setCounter(counter + 1)}&gt;Click me&lt;/button&gt;
    }
    
    return (
      &lt;div&gt;
        {counter}
        &lt;Parent /&gt;
        &lt;ChildComponent /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Child component:</p>
  <pre><code>import React from 'react';
  
  export const ChildComponent = React.memo(
    () =&gt; {
      React.useEffect(() =&gt; {
        console.log('rerender child component');
      }, []);
  
      return &lt;p&gt;Prevent rerender&lt;/p&gt;;
    },
    () =&gt; false
  );
  </code></pre>
  <p>I made one working in React couldn't figure it out in my own app:
  <a href="https://codesandbox.io/s/objective-goldwasser-83vb4?file=/src/ChildComponent.js" rel="nofollow noreferrer">https://codesandbox.io/s/objective-goldwasser-83vb4?file=/src/ChildComponent.js</a></p>