ref-name

react-naming-convention/ref-name

@eslint-react/naming-convention-ref-name

// Problem: A ref identifier must be named 'ref' or end in 'Ref'.
const count = useRef(0);

// Problem: A ref identifier must be named 'ref' or end in 'Ref'.
const input = useRef<HTMLInputElement>(null);

// Problem: A ref identifier must be named 'ref' or end in 'Ref'.
const value = useRef(null);

// Problem: Suffix must be exactly 'Ref' (case-sensitive)
const myREF = useRef(0);

// Problem: A ref identifier must be named 'ref' or end in 'Ref'.
obj.nested.value = useRef(0);

// Recommended: Simple 'ref' name
const ref = useRef(0);

// Recommended: Descriptive name ending with 'Ref'
const countRef = useRef(0);

// Recommended: Descriptive name ending with 'Ref'
const inputRef = useRef<HTMLInputElement>(null);

// Recommended: Descriptive name ending with 'Ref'
const valueRef = useRef(null);

// Recommended: Descriptive name ending with 'Ref' (MemberExpression)
obj.nested.myRef = useRef();

// OK: Not assigned to an identifier or member expression, so there is no name to validate
export default useRef(null);

// OK: The call sits inside an array literal, so it is not directly assigned to a checkable name
const [value] = [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;