RULE RECOMMENDATION: common useRef.current mistake warning (w/ example)

[max-woolf]

React Documentation: https://react.dev/reference/react/useRef

WRONG example:

export function MyComponent() {

    const myRef = useRef(false);

    const myFunction = () => {

        myRef.current = true;

        // FAILS!
        if (myRef) {
            // do important thing
        }

    }
}

The user should get warned that he is calling useRef improperly in that situation, instead it should be:

RIGHT example:

export function MyComponent() {

    const myRef = useRef(false);

    const myFunction = () => {

       myRef.current = true;

        // WORKS!
        if (myRef.current) {
            // do important thing
        }

    }
}

I think this is an easy mistake to make, one more important and likely than, for example, "no-unused-vars." And one very easy to lint.

[ljharb]

Do you have a more realistic example? In both cases it’s always truthy, so the if shouldn’t even be there.

[max-woolf]

I guess that'd be

export function MyComponent() {
  const myRef = useRef(null); // Initialized to `null`

  const handleClick = () => {
    // Updating the ref's value (e.g., to a DOM element)
    myRef.current = document.getElementById("my-element");

    // ❌ INCORRECT: `myRef` is always truthy (it's an object)
    if (myRef) {
      // This block will always execute, even if `myRef.current` is null
      console.log("Ref exists (but current might still be null!)");
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

export function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    myRef.current = document.getElementById("my-element");

    // ✅ CORRECT: Checks `myRef.current`, which may be truthy or falsy
    if (myRef.current) {
      //  This block won't execute, when `myRef.current` is null
      console.log("Element found:", myRef.current);
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

The incorrect check (if (myRef)) always evaluates to true (since ref is an object), even when myRef.current is null or false.

This mistake is common when working with DOM refs or storing boolean flags in refs.

Unlike unused variables, this directly impacts runtime behavior silently.

[ljharb]

This kind of seems like something TS should be warning you about - since without type info, an eslint rule can't know that useRef always returns a truthy object.