Unable to disable ESLint rule react/no-unsafe

user_1260245 0
Viewed 237

I'm working on a React web application and attempting to disable the ESLint rule react/no-unsafe for a class component method UNSAFE_componentWillUpdate. However, within the body of the class component definition, the following does not seem to work:

    /* eslint-disable react/no-unsafe, camelcase */
    UNSAFE_componentWillUpdate() {
        ....
    }
    /* eslint-enable react/no-unsafe, camelcase */

or:

    // eslint-disable-next-line react/no-unsafe, camelcase
    UNSAFE_componentWillUpdate() {
        ....
    }

I am using React v16.9 and ESLint v7.32.0. When I run my lint command, I still see the following warning:

8:8  warning  UNSAFE_componentWillUpdate is unsafe for use in async rendering. Update the component to use componentDidUpdate instead. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html  react/no-unsafe

There are other ESLint ignore statements in the file that are working. Is the rule name correct? Are there some ESlint rules that cannot be disabled? Not sure what could be the issue here.

eslint reactjs
1 Answers

Try putting the eslint-disable comments around the class, instead of around the method. E.g.:

// eslint-disable-next-line react/no-unsafe
export class MyComponent extends React.Component {

    // eslint-disable-next-line camelcase
    UNSAFE_componentWillUpdate() {
        // ...
    }
}
user_114476820
Related