Bug: rules-of-hooks ESLint rule not catching conditional hooks in React.memo() (Typescript)

[zachkirsch]

I've noticed that the "no conditional hooks" aspect of the rules-of-hooks eslint rule isn't working inside a React.memo()'ed component. The project is typescript and I'm using the parse from @typescript-eslint/parser, so I'm not sure if the problem is with the rule or with the parser.

React version:

Steps To Reproduce

1. Create a component using React.memo() inside a Typescript project
2. Add a hook that is called conditionally, e.g.

export const MyMemoizedComponent = React.memo((props: {}) => {
  if (Math.random() > 0.5) {
    React.useEffect(() => {}, []);
  }
  return <div />;
});

Link to code example: https://codesandbox.io/s/no-rules-of-hooks-warning-in-typescript-reactmemo-ei00n?file=/src/index.tsx

The current behavior

ESLint does not show any errors.

The expected behavior

ESLint should show an error like React Hook "React.useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.

[jackmccloy]

+1ing just to confirm that I'm seeing the same behavior

[eps1lon]

Thanks for the feedback.

The rules of hooks are only enforced for

Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).

-- https://reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce

So you should name your function to get the rule to work. This also helps debugging since your inner component wouldn't have a display name otherwise.

export const MyMemoizedComponent = React.memo((props: {}) => {
export const MyMemoizedComponent = React.memo(function MyComponent(props: {}) {
  if (Math.random() > 0.5) {
    React.useEffect(() => {}, []);
  }
  return <div />;
});

Duplicate of #20408, #20448