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-name

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

Presets

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.

// 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);

// 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);