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

Related rules

More React Compiler rules from the rules reference:

• react-hooks-js/set-state-in-effect: Validates against calling setState synchronously in an effect. This can indicate non-local derived data, a derived event pattern, or improper external data synchronization.
• react-hooks-js/set-state-in-render: Validates against setting state during render, which can trigger additional renders and potential infinite render loops
• react-hooks-js/static-components: Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering
• react-hooks-js/todo: Unimplemented features
• react-hooks-js/unsupported-syntax: Validates against syntax that we do not plan to support in React Compiler