logoESLint React
Rules

is-from-react

Full Name in eslint-plugin-react-debug

react-debug/is-from-ref

Features

🐞

Description

Reports all identifiers initialized or derived from ref in JSON format. Useful for debugging. This rule should only be used for debugging purposes. Otherwise, leave it off.

Examples

import { useRef, useEffect } from "react";

function MyComponent() {
  const myRef = useRef(null);
  //    ^^^^^
  //    - This identifier is derived from a ref.
  const anotherRef = myRef;
  //    ^^^^^^^^^^
  //    - This identifier is derived from a ref.

  useEffect(() => {
    const divElement = anotherRef.current;
    //    ^^^^^^^^^^
    //    - This identifier is derived from a ref.
  }, []);

  return <div ref={anotherRef}>Hello, world!</div>;
}

Implementation

On this page