Bug: ESLint - Custom hook in a typescript class method trigger an error about class component

[nbrignol]

When I create a custom hook in a simple Typescript class, ESLINT is giving me this error :

React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

However, this is not an expected error because I am not working with a class component.

It should not trigger any error OR at least trigger a specific, adapted error if anything.

Standard implementation (classic function based) for reference :

function useMyCustomHookFunction(){
    return useState("this-is-a-test-1");
}

const [test1, setTest1] = useMyCustomHookFunction()

return (
    <>
         <p>From function: {test1}</p>
    </>
)

This works well, my output is :

From function: this-is-a-test-1

Class+method based implementation :
This implementation works but trigger the unexpected error (React Hook "useState" cannot be called in a class component).

class TestHook {

    private initialValue = "this-is-a-test-2"
    
    public useMyCustomHookMethod(){
        return useState(this.initialValue);
    }

}

const testInstance = new TestHook()
const [test2, setTest2] = testInstance.useMyCustomHookMethod()

return (
    <>
        <p>From method: {test2}</p>
    </>
)

Output :

From method: this-is-a-test-2

Expected Behavior

I expect no warning/error when implementing a custom hook in a method OR a specific error targeting custom hook in simple class method if any reason to disallow that.

Note

This error is not limited to "useState". Any hook used is concerned (useEffect, useMutation for React Query, etc.)

[markerikson]

@nbrignol Why are you trying to write a hook as a class? There's no reason to.

[yanup2913]

@nbrignol you are returning react hooks from the class based component that in itself breaking the reack hook rules. Let us know your usecase we will try to help you with that.

[nbrignol]

@nbrignol Why are you trying to write a hook as a class? There's no reason to.

Because I want to :p. Class methods are functions, right ?
And in this case because classes are great for abstractions : I can abstract my hook behind an interface for exemple.

Actually this is working very well. The problems comes from the linter's message that is not right.
If it's forbidden (I'd like to know why and) the message should be dedicated : this is not a class component.
And if it's not (what I think and hope) the message should not be triggered here.

[markerikson]

@nbrignol there is genuinely no good reason to do this that I can think of. There's no benefit. A hook doesn't need to be "abstracted behind an interface". It shouldn't have access to class field methods. It needs to be based solely on the inputs and calling other hooks.

You're running into a problem you've created for yourself :) Just write it as a normal standalone function and move on.

[nbrignol]

@nbrignol there is genuinely no good reason to do this that I can think of. There's no benefit. A hook doesn't need to be "abstracted behind an interface". It shouldn't have access to class field methods. It needs to be based solely on the inputs and calling other hooks.

You're running into a problem you've created for yourself :) Just write it as a normal standalone function and move on.

Again I think this is not the point.

Either it's a technical limitation and can't do that : I can understand, and I think you should add a dedicated message because this one does not match the context;
or it's not a problem in itself (even if is not a traditional way to work) and the error should not be triggered.

In both case, ESLint doesn't handle well this situation, that's why I am filling this "bug".
(Of course I understand this is not a priority matter for the project !)

Thanks for your time.

[github-actions]

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]

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!