Skip to content

Unexpected warning in react-hooks/exhaustive-deps using optional chaining operator #19083

@jcestibariz

Description

@jcestibariz

This issue is very similar to #18985 but it happens with useCallback instead of useEffect, and the error message is different.

eslint-plugin-react-hooks version: 4.0.4

Steps To Reproduce

The order of reference matters, if you flip the two calls to console.log no error is reported. And as in #18985 replacing ?. with . won't result in an error.

function MyComponent(props) {
  useCallback(() => {
    console.log(props?.foo);
    console.log(props);
  }, [props]);
};
package.json
{
  "name": "bug-react-hooks",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "scripts": {
    "test": "eslint test.js"
  },
  "dependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.1.0",
    "eslint-plugin-react-hooks": "^4.0.4"
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module"
    },
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/exhaustive-deps": "warn"
    }
  }
}

The current behavior

The following warning is reported:

5:6  warning  React Hook useCallback has an unnecessary dependency: 'props'. Either exclude it or remove the dependency array  react-hooks/exhaustive-deps

The expected behavior

No warning should be reported.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions