facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.48k stars 46.75k forks source link

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

Open artaommahe opened 5 days ago

artaommahe commented 5 days ago

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();
    }
  3. 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

eps1lon commented 5 days ago

Is this documented by Playwright to be named use?

artaommahe commented 5 days ago

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