[Compiler Bug]: Ref values may not be accessed during render when using `mergeRefs`

[NeilTheFisher]

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/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdNvhgJcsNgB5CTAG4A+ABIJKlCPgDqOSoTkB6RaoDc4gL7jxx4-lxkA1gjYkYEALb4AFrlxMMGR7AHMmXF8oACMAOjhvYwB3CAArXARnLzJU4y8EGFCEAFopEjBjaO1ovLImOmMweGN64nRY3DBxWgZmVnx8woQAJVIwOQAVFX5xfHxYhfrMKFxR8uR8flGyRli1yZV8AB98emISeoRCQQBtAF1xQQ3t3f2p4-wX3D3SAGEyLTRHbOA4iWb4BJ0MA0JjUApXACSdGWqzG+AAvPglis1mBYhc4TB+AAhCAQSgIMh0QSWOjgpgkTYEjJSQhIlG42IUuihSL4OSYgCMwjEEjmkOh+AuMGhawxUthLMRyJxYxuAAY7rTwXMpDIYO4mDLUYyjic6FRKLS5jY6RI9bIpfRGCw2IMioRcfwyiKdVKcJsJQRsSb8BBGcz4WyVSawL6xXMsYz+LhOJgEOGsTG5ejc-gAOQ9F2sfPxxPlrMc0je0g0v02-CaMAIJObENrMsVub8dukfBkMCfSm7dgrMhVEakADy0VSCEYkw+Fq0KkE8VgUjoBExZWtFdt5YP+CstNt3WdfTY7AKRTWv282Doblw+hgznqoX4wEkfasG2-ZTPMO3z7GoEzsAAMgAIsoACiFL5FuhxWJ2QZEMoOanM2az8MulB1nacz2PgmADmAH6OL4LZlIOKRvoO0ScPgSQwGQfAUZECA+PU-ZOr0rrgg6Br8mYP4kOiwDupO5Svu+PL8EIGKHDcZQADToUoax3IIVgqGUjgINCJhmCop62HQRaXgMN7SWAskfgcMwSEUsYbIp6KHFswE-CQoInGcpCXNc9yPGC9rSI6UlegssQuV6ggEWeFkXq6HA2XeD6sM+xKeK4dBfmJx7-mJQE7CBpByGBkEwUo8Fcc+yGoawkpmJhUDYdWeEEeCxGYJ4E4+FRUiCRFwkKMoYkSVFYw1iQ6mtbWun6RkRmmMopnWOIIBWEAA

Repro steps

I was previously getting an error saying, "Ref values (the current property) may not be accessed during render." However, passing a function to access the refs seems to work as a solution since there is no eslint error now.

In the repro, wrapping the refs in a function return doesn't change any functionality so I'm finding this issue to be a little odd.

The error doesn't always appear with every component. I couldn't find a reason why.

This seems to be similar to #31290

How often does this bug happen?

Sometimes

What version of React are you using?

19.0.0

What version of React Compiler are you using?

19.0.0-beta-37ed2a7-20241206

[aeharding]

Workaround: https://mantine.dev/hooks/use-merged-ref/

reactwg/react-compiler#31

[josephsavona]

See #34004 which adds support for the merge refs pattern. If a function call takes refs as arguments we normally error. However, if we can infer that result of the function is also a ref — named ref or -Ref, or passed as a ref prop — then we allow the call.

[josephsavona]

Fix landed!