[Compiler Bug]: Compiler disagrees with `exhaustive-deps` linter on whether `React.Ref<T>.current` must be in a deps array

[jthemphill]

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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEUYCA6hDANYIwAUAlEcADrFFyFg5EDuVWjABKCNEQC8JMqLT1MUADaLGAbnbsi0hAFE0aBLnpNJAPhaat-QXVkA6OLBgJMvKZgR8ilGnXqsQOwB6AV8YOwArMAC1Sy1QoTtCAFsEMDAAQwBzBEkiegRmCXM2DitObghFBDtFCCz-EABZNMycojQYCGTrMLt+gIAaIkL1MqIAXzHy5xxYYhNii3H4mxExAH47HDpkvEwMnaZp8t6he0cYZ1c8hWUTrSnLCdjMS1n5s9sxMYmNTAw2HwhCITQytAAgj4hCZSlouJgeF91uIpKQKGtjv8tEEAFS4uK4ogASXEAE9oJwABYZTDtAAGCW+aHpRBwECIjLWFycLhw9OGOCpCEJFWSAAc8NUYPwpYoxZLqmyqXgwBUACa5LhXQw4RRkuyi0UAISgvCFuQg+jwcDwGXlCAAHjTSPgAG4IAC0mvFasU+x2Mr4cuVXS8QtVor4GRgmH2WSIhyIFKgyCNZSJogyuCIAAkIBBqEQs7g7OiAML2xQAI2zRZpatpJEwHkQ6RjZKIPpcmuwZLTGaIAHImSiHLzXEO7EQdHgLTKnXBFFBNUQ50QqERnMkIB7lSLB93ML24J2YzAMgbQWaMtWlW77VA0kR-bRh6OeTrJ6KYy4h7wH39dUuwQcUexcW1n2rQwMnRIhkhvfA6X3Hp1QgNJMH-UVnE9a5NRlC0FUIPk7DSf1XGcbMcE9KkC2oMAgidF0eDwD1vVA6JB1FMiA0o3AaLohimNgli2J9TirFxIJLARJEaWPapy39OAizRMhK2UWsVOMIoSjiZFP2uHAtnFCAeBadscnoIclxtWhgJBQjqzNdlMNeR5hgAbX0j8xEGfSgiCAyxHHL8cH8jgAF1XneBA5ljfJ9IAHmcnBXI3TAlLsiRgHk9VFOU6gJiIIJTEsV4JhACYgA

Repro steps

I have a hook called useWorker() which creates and configures a WebWorker, returning it as a React.RefObject<Worker>, while careful to never perform a side effect during a render.

The compiler fails to compile my code as written, but succeeds if I specify workerRef.current as a dependency. But you're not supposed to express Ref.current as a dependency, per the react-hooks/exhaustive-deps linter:

React Hook React.useCallback has an unnecessary dependency: 'workerRef.current'. Either exclude it or remove the dependency array. Mutable values like 'workerRef.current' aren't valid dependencies because mutating them doesn't re-render the component. eslintreact-hooks/exhaustive-deps

How often does this bug happen?

Every time

What version of React are you using?

React Playground on 2024-05-17

[josephsavona]

Thanks for posting this. The compiler currently is only detecting refs that come from useRef(), so it doesn’t consider workerRef to be a ref in the example. We’ve gone back and forth on this, and I think I this issue is a good reminder that the -Ref suffix is a strong convention that we can consider building on (though there’s a bunch to think through). We’ll follow up here!

[jthemphill]

This issue is resolved when enableTreatRefLikeIdentifiersAsRefs is active!

Playground link