question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue
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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:15 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
fortinmikecommented, Feb 9, 2019

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>;
};
0reactions
gaearoncommented, Apr 1, 2020

(We fixed the case for memo/forwardRef)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rules of Hooks - React
Only Call Hooks from React Functions​​ By following this rule, you ensure that all stateful logic in a component is clearly visible from...
Read more >
12 essential ESLint rules for React - LogRocket Blog
This plugin only contains two rules, but they are critical to avoiding common pitfalls when writing function components with Hooks.
Read more >
eslint-plugin-react - npm
Start using eslint-plugin-react in your project by running `npm i ... If this isn't set, any propTypes wrapped in a function will be...
Read more >
eslint-plugin-react-hooks shows incorrect "missing dependency"
Show activity on this post. Assume you are using React and you are writing a custom hook useSomething that returns the identical same...
Read more >
eslint-plugin-react-hooks | Yarn - Package Manager
React is a JavaScript library for building user interfaces. ... and React will efficiently update and render just the right components when your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found