ref-name

react-naming-convention/ref-name

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

// 🔴 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: Not reported by this rule — the result is immediately accessed via a member expression instead of being stored in a ref variable
// (note: reading `.current` during rendering like this is discouraged by the React docs, except for initialization)
const value = useRef(null).current.value;

// 🔵 OK: Not reported by this rule — same as above (the `??=` lazy-initialization write is the officially tolerated exception)
const useOnce = <T,>(fn: () => T) => (useRef<{ value: T }>().current ??= { value: fn() }).value;

{
  "settings": {
    "react-x": {
      "additionalRefHooks": "/^(useMyRef|useCustomRef)$/u"
    }
  }
}