CODEWITHSUNDEEP
reactjsreact-reduxreact-hookseslint
aravind
aravind

Reputation: 152

Trouble disabling react-hooks/exhaustive-deps warning when using redux action creator inside useEffect hook

Trying to call a redux action creator inside a useEffect hook the following warning-

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

This is the useEffect hook-

const { getPlanQuotes } = props;

useEffect(() => {
   getPlanQuotes();
}, []);

So I tried disabling it using // eslint-disable-next-line react-hooks/exhaustive-deps. Like this-

useEffect(() => {
    getPlanQuotes();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

But it still throws the warning on the console without the react-hooks/exhaustive-deps being specified

And also the editor throws the following error-

.eslintrc config-

{
    "parser": "babel-eslint",
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
    "env": {
        "jest": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": ["json", "prettier"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "rules": {
            "no-underscore-dangle": [
                "error",
                {
                    "allow": ["_id", "b_codes_id"]
                }
            ],
            "react/prop-types": [1]
        },
        "settings": {
            "import/resolver": "meteor"
        },
        "globals": {
            "_": true,
            "CSSModule": true,
            "Streamy": true,
            "ReactClass": true,
            "SyntheticKeyboardEvent": true
        }
    }
}

Upvotes: 1

Views: 9981

Answers (1)

aravind
aravind

Reputation: 152

It was a problem with the .eslintrc configuration as @DrewReese suspected. The plugins array was missing react-hooks and the rules object was missing react-hooks rules.

So, the final configuration is as follows-

{
    "parser": "babel-eslint",
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
    "env": {
        "jest": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": ["json", "prettier", "react-hooks"], //added "react-hooks" here
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "rules": {
            "no-underscore-dangle": [
                "error",
                {
                    "allow": ["_id", "b_codes_id"]
                }
            ],
            "react/prop-types": [1],
            "react-hooks/rules-of-hooks": "error", // added "react-hooks/rules-of-hooks"
            "react-hooks/exhaustive-deps": "warn" // added "react-hooks/exhaustive-deps"
        },
        "settings": {
            "import/resolver": "meteor"
        },
        "globals": {
            "_": true,
            "CSSModule": true,
            "Streamy": true,
            "ReactClass": true,
            "SyntheticKeyboardEvent": true
        }
    }
}

Upvotes: 6

Related Questions