Bug: eslint-plugin-react-hooks cannot use optional chaining in deps

[coolkev]

React version: 16.3.1
eslint-plugin-react-hooks version: 4.0.0

Steps To Reproduce

Use ?. in dependency to any of the react hooks.

export default function App() {
    const x = Date.now() % 2 === 0 ? { test: true } : undefined;
  
    React.useEffect(() => {
      if (x?.test) {
        console.log('test');
      }
    }, [x?.test]);
  
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    );
  }
  

Link to code example:
I was unable to reproduce the behavior in codesandbox, it must be transforming the code or stripping out the ? before linting. It happens in VS Code.

The current behavior

eslint errors occur:
React Hook React.useEffect has a missing dependency: 'x'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps
React Hook React.useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked.eslintreact-hooks/exhaustive-deps

The expected behavior

I would expect it to work just like it does currently for non-optional child member access.

When ? is removed, it no longer shows eslint errors, but obviously would fail at runtime if x is undefined.

[blydiet]

Hey one, Idea is inside of x you can make it look more like this
const x = Date.now() % 2 === 0 ? { test: true } : { test: undefined };
that should get the result you want I think.

Also, if you're on Firefox and you did not set privacy.reduceTimerPrecision you will not get the right reduced time precision for the date.now() the numbers will be a little random

check out the docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

[coolkev]

The example code was just to show a simple way to reproduce the problem of the hook reporting incorrectly. The data used in my dependency checks is actually from redux store and will contain undefined objects. I use the useEffect hook to handle fetching the data if it is not present, and it can happen at multiple levels.

For example:

const OrderDetail = ({ orderId }) => {

    const order = useSelector(state => state.orders[orderId]);

    const customer = useSelector(state => order && state.customers[order.customerId]);

    const dispatch = useDispatch();

    React.useEffect(() => {
        dispatch(fetchOrder(orderId));
    }, [orderId]);

    React.useEffect(() => {
        if (order?.customerId) {
            dispatch(fetchCustomer(order?.customerId));
        }
    }, [order?.customerId])

    return <div>
        <div>Order #{order?.id}</div>
        <div>Customer: {customer?.name}</div>
    </div>
}

Obviously, this can be solved by extracting customerId to a separate const. But this again is a simple example, and I can have much more complicated dependencies that would involve extracting a bunch of throw away consts that are only used inside of the hook. Ideally, the deps checks would work just like they do currently whether or not optional chaining is used.

I've already posted a PR that fixes the issue.

[gaearon]

Optional chaining problems should be fixed in eslint-plugin-react-hooks@4.0.6. If you experience some problem with optional chaining after 4.0.6, please file a new issue. Thanks.

[gaearon]

eslint-plugin-react-hooks@4.1.1 should have the fix for the ESLint parser.

[vvscode]

I still have this problem with eslint-plugin-react-hooks@^4.1.2