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

[eslint-plugin-react-hooks] useWithoutEffectSuffix fix (#18902) #18907

Merged
merged 2 commits into from
May 13, 2020

Conversation

surgeboris
Copy link
Contributor

Summary

Due to a bug react-hooks/exhaustive-deps currently warns whenever name contains -Effect- (even if it does NOT contain it as a suffix).

Since we only reserve -Effect suffix, react-hooks/exhaustive-deps is
expected to succeed without warning on a custom hook which contains -Effect- in
the middle of it's name (but does NOT contain it as a suffix).

Test Plan

Added a testcase that fails when fix isn't present:

$ yarn test ExhaustiveDeps
yarn run v1.22.4
$ cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js ExhaustiveDeps
 FAIL  packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
  react-hooks
    valid
      ✕ 
function MyComponent(props) {
  useWithoutEffectSuffix(() => {
    console.log(props.foo);
  }, []);
}
 (282ms)

  ● react-hooks › valid › 
function MyComponent(props) {
  useWithoutEffectSuffix(() => {
    console.log(props.foo);
  }, []);
}


    assert.strictEqual(received, expected)

    Expected value to strictly be equal to:
      0
    Received:
      1
    
    Message:
      Should have no errors but had 1: [
      {
        ruleId: 'react-hooks',
        severity: 1,
        message: "React Hook useWithoutEffectSuffix has a missing dependency: 'props.foo'. Either include it or remove the dependency array.",
        line: 5,
        column: 6,
        nodeType: 'ArrayExpression',
        endLine: 5,
        endColumn: 8,
        suggestions: [ [Object] ]
      }
    ]

      at testValidTemplate (node_modules/eslint/lib/rule-tester/rule-tester.js:460:20)
      at Object.<anonymous> (node_modules/eslint/lib/rule-tester/rule-tester.js:662:25)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.13s, estimated 3s
Ran all test suites matching /ExhaustiveDeps/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Once fix is added test succeeds:

$ yarn test ExhaustiveDeps
yarn run v1.22.4
$ cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js ExhaustiveDeps
 PASS  packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
  react-hooks
    valid
      ✓ 
function MyComponent(props) {
  useWithoutEffectSuffix(() => {
    console.log(props.foo);
  }, []);
}
 (229ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.839s, estimated 9s
Ran all test suites matching /ExhaustiveDeps/i.
Done in 4.30s.

…ebook#18902)

Since we only reserve `-Effect` suffix, react-hooks/exhaustive-deps is
expected to succeed without warning on a custom hook which contains -Effect- in
the middle of it's name (but does NOT contain it as a suffix).
@surgeboris surgeboris changed the title [eslint-plugin-react-hooks] reproduce bug with a test and fix it (#18902) [eslint-plugin-react-hooks] useWithoutEffectSuffix fix (#18902) May 13, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 13, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e200285:

Sandbox Source
interesting-almeida-epe0p Configuration

@sizebot
Copy link

sizebot commented May 13, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against e200285

@sizebot
Copy link

sizebot commented May 13, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against e200285

Since we only reserve `-Effect` suffix, react-hooks/exhaustive-deps is expected
to succeed without warning on a render helper which contains -use- in the middle
of it's name (but does NOT contain it as a prefix, since that would violate hook
naming convetion).
@gaearon gaearon merged commit 487c693 into facebook:master May 13, 2020
@gaearon
Copy link
Collaborator

gaearon commented May 13, 2020

thanks!

@surgeboris surgeboris deleted the use-without-effect-suffix branch May 13, 2020 15:45
@gaearon
Copy link
Collaborator

gaearon commented May 13, 2020

released in 4.0.2

@swissspidy
Copy link
Contributor

@gaearon #18861 is related to this, could you perhaps take a look at that one as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants