title: React.memo not working on a functional component
body: <p>I tried using <strong>React.memo()</strong> to prevent re-rendering on one of my components but it keeps on re-rendering whenever there are changes on its <strong>Parent Component</strong>.</p>
  <p>Here's my child component with React.memo()</p>
  <pre><code>const Transactions = React.memo(() =&gt; {
    console.log('rerender')
  
    return (
      &lt;&gt;&lt;/&gt;
    )
  })
  </code></pre>
  <p>Here's where it's being called. Whenever I click the <strong>Add</strong> button it calls the state function setModal(true), <strong>Transactions component is being re-rendered</strong></p>
  <pre><code>const ScholarHistory = ({setModal}) =&gt; {
    return (
      &lt;div className=&quot;pml-scholar pml-scholar--column&quot;&gt;
        &lt;div className=&quot;pml-scholar-container&quot;&gt;
          &lt;button onClick={() =&gt; setModal(true)} className=&quot;pml-scholar-add-button&quot;&gt; Add &lt;/button&gt;
        &lt;/div&gt;
  
      &lt;Transactions /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I am new to React and been exploring/creating wider projects. Any ideas why it keeps on re rendering? Thanks!</p>