Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add react-hooks/exhaustive-deps lint rule #20936

Closed
wants to merge 2 commits into from

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Mar 16, 2020

Description

As mentioned in the docs, when using hooks it's worth checking if deps array is exhaustive. This is done by react-hooks/exhaustive-dep eslint rule. This PR adds that rule. It immediately detected numerous violations, most of the time with a pretty good explanation:

62:2 warning The 'toggleEventBindings' function makes the dependencies of useEffect Hook (at line 54) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 'toggleEventBindings' definition into its own useCallback() Hook react-hooks/exhaustive-deps

function ObserveTyping( { children, setTimeout: setSafeTimeout } ) {
	// ...
	useEffect( () => {
		toggleEventBindings( isTyping );
		return () => toggleEventBindings( false );
	}, [ isTyping ] );
	// ...
	function toggleEventBindings( isBound ) {

Let's use this PR as a place to discuss whether or not we should be using that rule.

How has this been tested?

Tested locally.

Types of changes

Non-breaking changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@draganescu draganescu assigned draganescu and unassigned draganescu Mar 16, 2020
@draganescu draganescu added [Type] Build Tooling Issues or PRs related to build tooling [Type] Code Quality Issues or PRs that relate to code quality labels Mar 16, 2020
@aduth
Copy link
Member

aduth commented Mar 16, 2020

@youknowriad I seem to recall that you had some objections to this previously?

@gziolo
Copy link
Member

gziolo commented Mar 17, 2020

There is PR where we @youknowriad added missing dependencies to the usage of custom hooks: #19044. I can’t find the discussion about the rule you propose but it might have something to do with giving false negatives for referenced pure functions and similar cases that the rule doesn’t process (or used to) properly.

@youknowriad
Copy link
Contributor

I'm not against adding this rule but I'm pretty certain this breaks a lot of existing hooks, so we need to be careful when "fixing" the lint error to ensure the desired behavior is retained. Sometimes it means refactoring the code I believe.

@@ -30,5 +30,6 @@ module.exports = {
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it's 'warn' for the purpose of initial discussion, but we shouldn't want to introduce this to the codebase as a warning. It will be ignored.

Related: #18458

@adamziel
Copy link
Contributor Author

Closing for now. I am not going to pursue merging this PR for the time being and we can always reopen later.

@adamziel adamziel closed this Jun 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Build Tooling Issues or PRs related to build tooling [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants