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: react-hooks/exhaustive-deps reports a dependency if typeof TypeScript operator is used in a function. #27548

Closed
Thaigun opened this issue Oct 19, 2023 · 4 comments
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@Thaigun
Copy link

Thaigun commented Oct 19, 2023

These issues linked below are closely related, but I believe the problem was only fixed if you use typeof TypeScript operator inside the useEffect callback.
#19327
#18828

However, if you call a function from the useEffect callback and that function uses typeof in a type context, exhaustive-deps reports a problem.

React version: 18.2.0
"eslint-plugin-react-hooks": "^4.6.0"

Steps To Reproduce

  1. Set up a project with eslint, eslint-plugin-react-hooks installed.
  2. In a useEffect, call a function that uses typeof to define the type of a parameter.
  3. Run lint with exhaustive-deps rule on.

Link to code example:
I hope this sample is enough, let me know if it would be useful to have a whole cloneable repository for reproduction.

export default function App() {
    const myNumber = Math.floor(Math.random() * 1000);

    function printNumber(n: typeof myNumber) {
        console.log(n);
    }

    useEffect(() => {
        const foo = 3;
        printNumber(foo);
    }, []);

    return <h1>Your random render number: {myNumber}</h1>;
}

The current behavior

The above code reports the following problem.

React Hook useEffect has a missing dependency: 'printNumber'. Either include it or remove the dependency array  
react-hooks/exhaustive-deps

The expected behavior

typeof operator in the type context does not affect the compiled JavaScript and should not be reported by exhaustive-deps.

For reference, the following does not report an error even though it's functionally the exact same as the code example above:

export default function App() {
    const myNumber = Math.floor(Math.random() * 1000);

    function printNumber(n: number) {
        console.log(n);
    }

    useEffect(() => {
        const foo = 3;
        printNumber(foo);
    }, []);

    return <h1>Your random render number: {myNumber}</h1>;
}
@Thaigun Thaigun added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Oct 19, 2023
@Thaigun
Copy link
Author

Thaigun commented Oct 19, 2023

Also related: #27335

@WizardRRR
Copy link

hola

Copy link

github-actions bot commented Apr 6, 2024

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 6, 2024
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

2 participants