fix(eslint): don't read ref.current on render

[lismith2-cisco]

Description

add rule to warn some cases of ref.current being read during render

Links

https://confluence-eng-gpk2.cisco.com/conf/display/WTWC/Use+useState+not+useRef+for+persistent+generated+ids

https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-543350

[maxinteger]

This selector does not work in every case. For example in the src/components/TextInput/TextInput.tsx there are 3 useRefs:

  const messageId = useRef(uuidV4());
  const labelId = useRef(uuidV4());
  const clearButtonId = useRef(uuidV4());

When the clearButtonId.current used directly ESLint give me the warning, but when messageId.cirrent is in an expression then there is no warning

[lismith2-cisco]

I know but I don't think it is possible to get eslint to validate this. If you can work out a way, please let me know :) It looks like you can maybe do it better in flow ( https://flow.org/en/docs/react/hook-syntax/#preventing-unsafe-mutation ) but I've not seen anything for TypeScript.

[maxinteger]

It works with the * wildcard selector, but (for some reason) does not select root level expressions, so I combined the two:

"JSXAttribute > JSXExpressionContainer > MemberExpression[property.name='current'], JSXAttribute > JSXExpressionContainer * MemberExpression[property.name='current']",

I tried to simplify it in based on ESQuery Selectors, without any luck. But I spent only 5 minutes on it.