Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lismith2-cisco wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,13 @@ module.exports = {
},
],
rules: {
'no-restricted-syntax': [
'warn',
{
'selector': "JSXAttribute > JSXExpressionContainer > MemberExpression[property.name='current']",
Copy link
Collaborator

@maxinteger maxinteger Jul 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

Copy link
Collaborator Author

@lismith2-cisco lismith2-cisco Jul 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

@maxinteger maxinteger Jul 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

'message': 'Do not read ref.current on render. Either use useState instead of useRef to store the value, or read ref.current in a useEffect or event handler.'
}
],
quotes: ['error', 'single', { allowTemplateLiterals: true, avoidEscape: true }],
'no-console': ['error', { allow: ['warn'] }],
'no-debugger': 1,
Expand Down