CODEWITHSUNDEEP
reactjs
ArtyGrand
ArtyGrand

Reputation: 93

Why does React think that my class method is hook?

Just updated react from v16 to v17 and got error, that Failed to compile.

 Line 37:9:  React Hook "Api.useAuth" is called conditionally. React Hooks must be called in the exact same order in every component render                                                                      react-hooks/rules-of-hooks
 Line 47:9:  React Hook "Api.useAuth" is called in function "loginInApp" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter  react-hooks/rules-of-hooks

My code like

import Api from 'utils/api';

// AuthContext.Provider
const AuthProvider = (props: any) => {

    if (existingToken) {
        Api.useAuth(existingToken);
    }

    ... other code

    const loginInApp = (token: string) => {
        Api.useAuth(token);
    };

}

in /utils/api

class Api {
    ... other code

    useAuth = (token: string) => {
        this.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    };
}

const api = new Api();

export default api;

I absolutely don't understand, why it is and what I should do.

Upvotes: 0

Views: 884

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

When eslint wants to check for Hooks rules it doesn't understand your class or your other method and it will not try to do that because it's a heavy process. it just checks if your methods starts with use or not. just change your class method name and you're good to go:

class Api {
    ... other code

    auth = (token: string) => {
        this.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    };
}

Upvotes: 1

Related Questions