is-from-ref
Reports all identifiers initialized or derived from refs in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise, leave it off.
Full Name in eslint-plugin-react-debug
react-debug/is-from-refFeatures
🐞
Rule Details
This rule reports all identifiers initialized or derived from refs in JSON format. It detects variables assigned from useRef-like calls and values read via member access on variables named ref or ending in Ref (e.g. myRef.current).
Examples
Ref initialized with useRef
import React from "react";
function MyComponent() {
// This rule reports identifiers initialized from a ref.
const myRef = React.useRef(42);
// ^^^^^
// - {"name":"myRef","init":"React.useRef(42)"}
return null;
}Value read from a ref
import React from "react";
function MyComponent() {
const myRef = React.useRef(42);
// This rule reports identifiers derived from member access on a ref (e.g. myRef.current).
const value = myRef.current;
// ^^^^^
// - {"name":"value","init":"myRef.current"}
return null;
}Options
Shared Settings
Custom ref hooks can be configured via shared ESLint settings under react-x. The value must be a JavaScript RegExp string with delimiters and flags (see Configure Analyzer).
{
"settings": {
"react-x": {
"additionalRefHooks": "/^(useMyRef|useCustomRef)$/u"
}
}
}Resources
See Also
react-debug/is-from-react
Reports all identifiers initialized from React in JSON format.
is-from-react
Reports all identifiers initialized from React in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise, leave it off.
jsx
Reports all JSX elements and fragments in JSON format. Useful for debugging. This rule should be used only for debugging purposes; otherwise leave it off.