profile
viewpoint

Ask questionsBug: rules-of-hooks should support hooks inside top-level IIFEs

React version: v16.13.1 eslint-plugin-react-hooks version: v3.0.0

Steps To Reproduce

  1. Write something like this:
const Component = () => {
  (() => {
    useState ();
  })()
};
  1. Run the rules-of-hooks linter rules on it.

The current behavior

Those linter rules will complain that the useState hook is being called inside a callback.

The expected behavior

Those linter rules should be a little smarter and ignore this kind of top-level IIFE "callback", since if I'm understanding things correctly it's completely safe to call hooks this way.

This is a bit of an edge case, but I'm wrapping some hook calls in an IIFE because I don't want to be able to access the values they return directly, as they may not be the most up to date, rather than via the accessor my IIFE returns.

facebook/react

Answer questions vkurchatkin

Linter rules are based on conventions. It is not possible to support every possible case, so only patterns that are popular are supported.

if I'm understanding things correctly it's completely safe to call hooks this way

It is safe indeed. So is calling a custom hook not use-something, or calling hooks in a loop, if it always has the same number of iterations. None of this is supported.

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - "object is not extensible" hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List