Gelio / tslint-react-hooks

For commonly used utilities, I often use this style:

import * as A from '../animate';
// ...later
if (something) { return null; }
// ...later
const [sceneRef, sceneFade] = A.useAnim({
    anims: [A.anims.fadeOut, A.anim.slow],
});

In this case, A.useAnim is not recognized as a hook. Changing the import style to import { useAnim } from '../animate'; works, but I would prefer not to use this style everywhere, and wouldn't be able to guarantee that all other project members remember that hooks need to be imported in this way.

Thanks for filing an issue 👍

Properties accessed on objects/namespaces other than the React object are not treated as hooks and it is a conscious decision made in the original eslint rule by Facebook:

https://github.com/facebook/react/blob/48f6594474c449b3ed62fadedda0ffad5e3a807a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L29-L37

The corresponding code in this repository is here:

tslint-react-hooks/src/react-hooks-nesting-walker/is-react-api-expression.ts

Lines 26 to 31 in 7c0cccf

    
           } else if (isPropertyAccessExpression(expression)) { 
        
             return ( 
        
               isIdentifier(expression.expression) && 
        
               expression.expression.text === 'React' && 
        
               predicate(expression.name) 
        
             );

It only treats members of the React namespace as potential hooks.

In order to accommodate your needs, I could add an option to the rule's configuration that would stop ignoring potential hooks in namespaces other than React. This feature would be opt-in, so it is not enforced on every consumer of this rule.

I will try to make the change in the upcoming 2 weeks once I have some free time 🙂 You can file a PR yourself if you want it sooner

Cool! Thanks for the quick response. Such a feature flag would be much appreciated, since I write a lot of hooks of my own.

tslint-react-hooks@2.2.1 is now available. It contains an option to detect hook calls from sources other than the React namespace.

@OliverUv Try installing the latest version of the rule, specify the option (see the README for more information on the option), and let me know if it works fine for you 😄

If it covers your use-case, please close this issue

@OliverUv Did you manage to take a look?

If there will be no response in 3 days, I will assume it is working fine and close the issue 🙂

I am closing this issue due to lack of activity

	} else if (isPropertyAccessExpression(expression)) {
	return (
	isIdentifier(expression.expression) &&
	expression.expression.text === 'React' &&
	predicate(expression.name)
	);

Support globbing import style