[lint] treat React.use() the same as use() #27769

kassens · 2023-11-30T22:37:34Z

We should probably treat React.use() the same as use() to allow it within loops and conditionals.

Ideally this would implement a test that React is imported or required from 'react', but we don't otherwise implement such a test.

noahlemen

lgtm overall, but it looks like we also could be reusing this fn:

react/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

Lines 52 to 59 in 790aab0

    
           function isReactFunction(node, functionName) { 
        
             return ( 
        
               node.name === functionName || 
        
               (node.type === 'MemberExpression' && 
        
                 node.object.name === 'React' && 
        
                 node.property.name === functionName) 
        
             ); 
        
           }

should that one be updated to include the lowercase 'react'?

acdlite · 2023-12-01T17:08:43Z

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -108,7 +108,17 @@ function isUseEffectEventIdentifier(node) {
 }

 function isUseIdentifier(node) {
-  return node.type === 'Identifier' && node.name === 'use';
+  switch (node.type) {


Nit: elsewhere in the implementation, isReactFunction is used to detect React.useX. Might as well use it here too to ensure the behavior is consistent.

react/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

Lines 52 to 60 in 790aab0

function isReactFunction(node, functionName) {

return (

node.name === functionName ||

(node.type === 'MemberExpression' &&

node.object.name === 'React' &&

node.property.name === functionName)

);

}

We should probably treat `React.use()` the same as `use()` to allow it within loops and conditionals. Ideally this would implement a test that `React` is imported or required from `'react'`, but we don't otherwise implement such a test. DiffTrain build for [640cceb](640cceb)

We should probably treat `React.use()` the same as `use()` to allow it within loops and conditionals. Ideally this would implement a test that `React` is imported or required from `'react'`, but we don't otherwise implement such a test.

We should probably treat `React.use()` the same as `use()` to allow it within loops and conditionals. Ideally this would implement a test that `React` is imported or required from `'react'`, but we don't otherwise implement such a test. DiffTrain build for commit 640cceb.

@kassens

##### [v5.0.0](https://github.com/facebook/react/blob/HEAD/packages/eslint-plugin-react-hooks/CHANGELOG.md#500) - **New Violations:** Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means `_Button` or `_component` are no longer valid. ([@kassens](https://github.com/kassens)) in [#25162](facebook/react#25162)  - Consider dispatch from `useActionState` stable. ([@eps1lon](https://github.com/eps1lon) in [#29665](facebook/react#29665)) - Add support for ESLint v9. ([@eps1lon](https://github.com/eps1lon) in [#28773](facebook/react#28773)) - Accept `as` expression in callback. ([@StyleShit](https://github.com/StyleShit) in [#28202](facebook/react#28202)) - Accept `as` expressions in deps array. ([@StyleShit](https://github.com/StyleShit) in [#28189](facebook/react#28189)) - Treat `React.use()` the same as `use()`. ([@kassens](https://github.com/kassens) in [#27769](facebook/react#27769)) - Move `use()` lint to non-experimental. ([@kassens](https://github.com/kassens) in [#27768](facebook/react#27768)) - Support Flow `as` expressions. ([@cpojer](https://github.com/cpojer) in [#27590](facebook/react#27590)) - Allow `useEffect(fn, undefined)`. ([@kassens](https://github.com/kassens) in [#27525](facebook/react#27525)) - Disallow hooks in async functions. ([@acdlite](https://github.com/acdlite) in [#27045](facebook/react#27045)) - Rename experimental `useEvent` to `useEffectEvent`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#25881](facebook/react#25881)) - Lint for presence of `useEvent` functions in dependency lists. ([@poteto](https://github.com/poteto) in [#25512](facebook/react#25512)) - Check `useEvent` references instead. ([@poteto](https://github.com/poteto) in [#25319](facebook/react#25319)) - Update `RulesOfHooks` with `useEvent` rules. ([@poteto](https://github.com/poteto) in [#25285](facebook/react#25285))

kassens requested review from acdlite and noahlemen November 30, 2023 22:37

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Nov 30, 2023

kassens changed the title ~~React use lint 2~~ [lint] treat React.use() the same as use() Nov 30, 2023

[lint] treat React.use() the same as use()

790aab0

kassens force-pushed the react-use-lint-2 branch from 0fca22a to 790aab0 Compare November 30, 2023 22:39

kassens requested a review from josephsavona November 30, 2023 22:39

noahlemen approved these changes Nov 30, 2023

View reviewed changes

acdlite reviewed Dec 1, 2023

View reviewed changes

acdlite approved these changes Dec 1, 2023

View reviewed changes

use isReactFunction

28a382a

kassens merged commit 640cceb into facebook:main Dec 1, 2023
36 checks passed

kassens deleted the react-use-lint-2 branch December 1, 2023 20:02

ztanner mentioned this pull request Dec 15, 2023

Update React from 2c338b16f to 0cdfef19b vercel/next.js#59666

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[lint] treat React.use() the same as use() #27769

[lint] treat React.use() the same as use() #27769

	function isReactFunction(node, functionName) {
	return (
	node.name === functionName \|\|
	(node.type === 'MemberExpression' &&
	node.object.name === 'React' &&
	node.property.name === functionName)
	);
	}

[lint] treat React.use() the same as use() #27769

[lint] treat React.use() the same as use() #27769

Conversation

Choose a reason for hiding this comment

Choose a reason for hiding this comment