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 and values read from ref.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 reading ref.current.
const value = myRef.current;
// ^^^^^
// - {"name": "value", "init": "myRef.current"}
return null;
}Options
Shared Settings
Custom ref hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:
{
"settings": {
"react-x": {
"additionalRefHooks": "(useMyRef|useCustomRef)"
}
}
}Versions
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.