react: eslint-plugin-react-hooks does not work with wrapped components

export const Counter = () => {
    let count, setCount;
    if (0 === 1) {
        [count, setCount] = useState(0);
    }
    return count;
};
const wrapper = Component => Component;
export const WrappedCounter = wrapper(() => {
    let count, setCount;
    if (0 === 1) {
        [count, setCount] = useState(0);
    }
    return count;
});

Linter shows an error in the first component, but ignore the second one.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 15

Most upvoted comments

Another interesting case that triggers this is using the built-in React.memo function:

const MyComponent = React.memo(props => {
  const count = 0;
  if (count === 1) useMyHook(); // NOT detected
  return <div>Hello</div>;
});

const MyComponent = props => {
  const count = 0;
  if (count === 1) useMyHook(); // Detected!
  return <div>Hello</div>;
};

fortinmike on Feb 9, 2019