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

Bug: eslint-plugin-react-hooks treats a non-react use function the same way as React.use #31237

Open
artaommahe opened this issue Oct 14, 2024 · 2 comments

Comments

@artaommahe
Copy link

artaommahe commented Oct 14, 2024

React version: 18.3.1
eslint-plugin-react-hooks: 5.0.0

Steps To Reproduce

  1. install eslint-plugin-react-hooks 5.0.0
  2. write this code
function smth(use: () => void) {
  use();
}
  1. get an error
    React Hook "use" is called in function "smth" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".eslint[react-hooks/rules-of-hooks](https://reactjs.org/docs/hooks-rules.html)

We got this error with use function in the callback of playwright's test.extend()

const test = base.extend<{ track: E2EGeneratedTrackFragment }>({
  track: async ({}, use) => {
    // --------------^ local `use` function
    const track = await generateTestTrack('e2e');
    await addTrackToArcade(track.id);
    await use(track);
    // -----^ the error is here
    await deleteTestTrack(track.id);
  },
});

Link to code example: -

The current behavior

any custom use function is treated like React.use

The expected behavior

only use() function from react is linted by those rules

Additional

There is no error with eslint-plugin-react-hooks v4.6.2

@artaommahe artaommahe added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Oct 14, 2024
@eps1lon
Copy link
Collaborator

eps1lon commented Oct 14, 2024

Is this documented by Playwright to be named use?

@eps1lon eps1lon added Component: ESLint Rules and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels Oct 14, 2024
@artaommahe
Copy link
Author

artaommahe commented Oct 14, 2024

yes

export type TestFixture<R, Args extends KeyValue> = (args: Args, use: (r: R) => Promise<void>, testInfo: TestInfo) => any;

also every example on this page https://playwright.dev/docs/test-fixtures#with-fixtures

And it's not just about playwright usage, it's more about preventing developers from using use as a custom function name anywhere in the react codebase with this rule enabled

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

No branches or pull requests

2 participants