ref-name
Enforces identifier names assigned from 'useRef' calls to be either 'ref' or end with 'Ref'.
Full Name in eslint-plugin-react-naming-convention
react-naming-convention/ref-nameFull Name in @eslint-react/eslint-plugin
@eslint-react/naming-convention-ref-namePresets
naming-convention
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
Enforces identifier names assigned from useRef calls to be either ref or end with Ref.
Examples
// Problem: Identifier 'myId' does not end with 'Ref'
const myId = useRef(null);// Problem: Identifier 'node' does not end with 'Ref'
const node = useRef(null);// Recommended: Name ends with 'Ref'
const myRef = useRef(null);// Recommended: Name is exactly 'ref'
const ref = useRef(null);// OK: Name ends with 'Ref' (MemberExpression)
obj.nested.myRef = useRef(null);// OK: The result is immediately accessed via a member expression instead of being stored in a ref variable
const value = useRef(null).current.value;// OK: The result is immediately accessed via a member expression instead of being stored in a ref variable (same as above)
const useOnce = <T,>(fn: () => T) => (useRef<{ value: T }>().current ??= { value: fn() }).value;Versions
Resources
Further Reading
See Also
react-naming-convention/id-name
Enforces identifier names assigned fromuseIdcalls to be eitheridor end withId.