Refs rule detects refs from useRef() and React.createRef()
The refs lint rule identifies a value as a ref when it is returned from useRef() or React.createRef().
React · API reference · all subjects
eslint-plugin-react-hooks/refs
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Refs rule detects refs from naming patterns
The refs lint rule identifies a value as a ref when the identifier is named 'ref' or ends in 'Ref' and reads from or writes to the .current property.
Refs rule detects refs passed through JSX ref prop
The refs lint rule identifies a value as a ref when it is passed through a JSX ref prop, such as <div ref={someRef} />.
Refs lint inference follows values through assignments and destructuring
Once a value is marked as a ref, the lint inference follows that value through assignments, destructuring, or helper calls. This allows the lint to surface violations even when ref.current is accessed inside another function that received the ref as an argument.
Refs rule prohibits writing to ref.current during render
The refs lint rule flags modifying ref.current during render as a violation. Reading or writing ref.current during render breaks React's expectations.
Refs should not be used for UI values that should be state
A common violation is using refs for values that should be state. State should be used for values that affect rendering, not refs.
Reading ref.current in effects and event handlers is allowed
Reading ref.current inside useEffect hooks or event handler functions is permitted and the correct way to access ref values.
Lazy initialization of ref values is allowed
It is valid to lazily initialize a ref value by checking if ref.current is null on first use within a function, rather than during render. This pattern is allowed because it occurs within an event handler or effect context.
Rename objects with .current to avoid refs lint false positives
If you are modeling a custom container object with a .current property that is not a real ref, rename it to avoid the lint flagging it. Choose a different name like 'box' so the compiler stops inferring it as a ref.