react-hooks-js/refs

Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)

• Category: React Compiler
• Severity: error
• Source: eslint-plugin-react-hooks
• Framework: global
• Enabled when: eslint-plugin-react-hooks v6+ installed AND React Compiler detected in project
• Documentation: https://react.dev/reference/eslint-plugin-react-hooks/lints/refs

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on reads or writes of .current on any value the compiler infers as a ref — anything returned from useRef/createRef, any binding ending in Ref or literally named ref, anything passed to a JSX ref prop — during render. False positive: the lazy-init pattern if (ref.current === null) ref.current = expensiveSetup() is explicitly allowed and should not trigger.

Fix prompt

Use this once validation confirms the diagnostic is real.

Move the .current access into useEffect, useLayoutEffect (for sync DOM measurements), or an event handler. If you only need to compute the stored value once per ref, use the lazy-init pattern above. If the value should drive re-renders, switch from useRef to useState — refs deliberately do not notify React when they change. See https://react.dev/reference/eslint-plugin-react-hooks/lints/refs