<p dir="auto">I've noticed that the "no conditional hooks" aspect of the <code class="notranslate">rules-of-hooks</code> eslint rule isn't working inside a <code class="notranslate">React.memo()</code>'ed component. The project is typescript and I'm using the parse from <code class="notranslate">@typescript-eslint/parser</code>, so I'm not sure if the problem is with the rule or with the parser.</p>
<p dir="auto">React version:</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Create a component using <code class="notranslate">React.memo()</code> inside a Typescript project</li>
<li>Add a hook that is called conditionally, e.g.</li>
</ol>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const MyMemoizedComponent = React.memo((props: {}) =&gt; {
  if (Math.random() &gt; 0.5) {
    React.useEffect(() =&gt; {}, []);
  }
  return &lt;div /&gt;;
});"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">MyMemoizedComponent</span> <span class="pl-c1">=</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">memo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">Math</span><span class="pl-kos">.</span><span class="pl-en">random</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0.5</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">return</span> <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos"></span> <span class="pl-c1">/</span>&gt;;
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/no-rules-of-hooks-warning-in-typescript-reactmemo-ei00n?file=/src/index.tsx" rel="nofollow">https://codesandbox.io/s/no-rules-of-hooks-warning-in-typescript-reactmemo-ei00n?file=/src/index.tsx</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">ESLint does not show any errors.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">ESLint should show an error like <code class="notranslate">React Hook "React.useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.</code></p>
<p dir="auto">React version:<br>
17.0.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li></li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useEffect } from 'react'

export default () =&gt; {
  if (true) return false

  useEffect(() =&gt; {})

  return false
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useEffect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">false</span>

  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span>

  <span class="pl-k">return</span> <span class="pl-c1">false</span>
<span class="pl-kos">}</span></pre></div>
<ol start="2" dir="auto">
<li>run the linter</li>
</ol>


<h2 dir="auto">The current behavior</h2>
<p dir="auto">No errors</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">error  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?</p>
<p dir="auto">failing test-suite case</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  code: `
    export default () =&gt; {
      if (cond) {
        useConditionalHook();
      }
    }
  `,
  errors: [conditionalError('useConditionalHook')],
},"><pre class="notranslate"><code class="notranslate">{
  code: `
    export default () =&gt; {
      if (cond) {
        useConditionalHook();
      }
    }
  `,
  errors: [conditionalError('useConditionalHook')],
},
</code></pre></div>