Bug: eslint exhaustive-deps doesn't recognize JSXIdentifier as used

[sophiebits]

function Component({reportType}) {
  let Report = Reports[reportType];
  let child = useMemo(() => {
    return <Report />;
  }, [Report]);

says that Report is an unnecessary dependency. It's not.

This is because eslint scope .references does not include JSX. I suspect if you pull in

https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-uses-vars.js

to your app's config then this won't happen. But maybe we should do something in the Hooks plugin itself too (since the others aren't officially recommended by the React team anyway).

[muskeinsingh]

Can I pick this up?

[yanneves]

@sophiebits would what you're doing not be better solved by React.memo() instead?

const Child = React.memo(() => <Report />)

https://reactjs.org/docs/react-api.html#reactmemo

[sophiebits]

@yanneves Not quite. See the second code example in https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations for more detail on the pattern I'm using.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

Duplicate of #18051