mergeRefs use case

[aeharding]

Hi there! I was playing with React Compiler and I have noticed errors when compiling code that follow the "merge refs" pattern.

For example, https://github.com/wojtekmaj/merge-refs.

Using the example in the readme, React Compiler throw an error:

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAEggDbkQAUAlEcADrFFyFg5EwJoCMRAXiJQwCAEo8iAHlIAVALIAZACJ4AbgFFyCALYJMnAHxE6AbiIB6C0QCSAch1EA5hDyYnRHBCIAjBMIAHABMAQxwEIIBCZiJWdk5uNAAmQRMKXX0cZDklVU1tPQN6AWMmFlirWwdnV3dPbz9WEMoI6JYAX1NmGK4EHFhiKSD1XrQBYD0YJ3EeMGpE3gAaUaTadstDLsx2kHagA

There's another very similar project here: https://github.com/gregberge/react-merge-refs, which React Compiler also complains about the example in the readme:

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEASggIZyEBmMEGBAOiDGRYwNz0B2mO+BwBDAhgBzBCUpgCAXwLVaDJizwBaIaIQrmk9ly5wInMIQCiAD1LYANggIBeYsoB0lXAHdSMACYSAFJShOCjRDAnNLLBtfLBosMAAaAm0ASn4uAgIDI0IrCDhSKwl7R3I8JygwcQRKX2SOTgzmPFgGgB4vNAA3JOq7YHUxCTBfAG1c-MLqxO0AXWTZAHoAPnrpOpBpIA

I'm curious, is this something that React Compiler can support, and if not does anyone have any ideas on alternatives to achieve the same goal?

[aeharding]

I think I found a good alternative - as a hook, React Compiler does not complain about this.

Mantine UI has a good hook - https://mantine.dev/hooks/use-merged-ref/

Playground example:

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCASggGYEC+BVMEGBA5DAgIZx6sDcAHQB2mHPiLCCJMgGEANmjgBrAPJQ8YNABMEAGknSEAMQhxSAFRics+oVNIIAsghgBzBFspVb9RszYAAhicQnhoQggA9AAWEBBKYPzCwlRQQjxoEHYAIggYEAAUAJQSdgRwWWCEGACeXgQAvIZexYJlFUJVhvKKquqaOvVNDj3KahraCAXFjQB8RLRFbVIdXVSmFlZYQ4YmZmCW1q0Gq9Uu7p7UjYbObh4tBlK1XrZS9rIKY-2TL48MGwctl4DEtkmUOHhYHYADxaNAANwIHCoDWAGHO92o9EiszatBAtCAA

Still, I'm not sure if the original examples violate the Rules of React? If not, perhaps the compiler should handle these too?

[aeharding]

Also, Mantine UI has a hookless mergeRefs function: https://mantine.dev/hooks/use-merged-ref/#mergerefs-function