[Compiler Bug]: react-hooks/immutability false positive on ref assignment

[igordanchenko]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAwgIYA21ARpXANYA0JZASggGZukIBlPJTwICAXwLcYEDAQA6IGAkZ5FAbnkA7bdyha4eNBC3sKJ4Wi0IYAdTQATPAAsAFMu4BKItoIE4JmCEANoBWpbWdo4ubGR45BaUVjb2Ts4AugQAvGZCIgiuAAyemjqm-oGEYRE2XNzZZlS0DMyuvn4ErloQDgjeWQB8PuUdBGj1rngAnlgIEPUe2Vk5inoGRiaK3sDto34eXT19pXsSBAjUZGMTHtu7ex4AdHCwyuEN3b0ne+L3fgD0-wIsjQeCMWgA5gQXGJlEFgfUYRVevdxCx7sEPOl0eUStp2so8LBTMRqklInU2GTklE0hJSr8ymtDMZTABZKYJbAmBDhVzERbiO7lMLw0mJGl1M45fgJcLklLRNy3UoEhBEmCmAA8DjQADcCB4ssBqRSeOIBlycNZwlr-rq9QNtIztAgAB44fAEXrcShQaiEZkbdlTACCWCwrmFflFhEWMs4PC6-uoePKhOJBC1HKtPPeRuAHkk-wGDO0IBYIDC3DQEJQ6G5XumsyIBAACtQoBCrAB5LDBsBnaSyAgAcgYdAuAFosJ3u1op8pVFOAtg0NQbPa0EFR6qtPz2oDV1h1yJWWyjsgFCAaNRFM6CGAz2AawhBx2u73+6ywCUK+BnAgAB3ABJcIbC0GgwBQX1LgQcQgA

Repro steps

Consider the following hook:

function useContainerWidth(ref) {
  const [containerWidth, setContainerWidth] = useState(0);

  const containerRef = useCallback(
    (node) => {
      if (typeof ref === "function") {
        ref(node);
      } else if (ref) {
        ref.current = node;
      }
      // omitting the rest of the code
    },
    [ref],
  );

  return { containerRef, containerWidth };
}

React compiler and eslint-plugin-react-hooks throw the following error:

Found 1 error:

Error: This value cannot be modified

Modifying component props or hook arguments is not allowed. Consider using a local variable instead.

   9 |         ref(node);
  10 |       } else if (ref) {
> 11 |         ref.current = node;
     |         ^^^ `ref` cannot be modified
  12 |       }
  13 |       // omitting the rest of the code
  14 |     },

The above code creates a callback ref that propagates node instance to the forwarded ref. I'm not sure why React compiler flags this as an error.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

1.0.0