[Compiler Bug]: "Ref values (the `current` property) may not be accessed during render" but there is no value access

[fdelu]

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/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBASggIZx4ByEAJggDSkIBmA8gEYBWCVzUMAgCyCDBAFCyrAgF8CrGBAwEAOiBgUq6gNyqAdgYD0RggBU0eADYIAamgYRkBTfoYwwBcgQBuDhBAEAO6WABZeBHiWNgYGeACeWAjm0Xb+EAAKSlieALxEBgQubAD8ztJcvFQAPAASZsIAMvaOAKI2GAj6hAA+BPpQVlYAfHr6RVHWCM5geDBo+gDmY0Vg8DNzC8sGsmMGrFD6VGgQ4xZTLQEAFMSarMyTNsxrcHLO5zaXmdlgAJQF42KeFg4yuhSKBGqdDQPmG4IhkNCAEZhsBHghZNUjMi4YCEcAjAAqAgIMBWBZ4AC00LA5E4Nkp+gQAA8qeSmQRuGBmZTyEikfEjJ1oeRKaFyGBKXByFgoqcCISjLJ4RDqn5HMVWLlgHd5C9tS95EZcQisdDYeDfmNlYZ9CYCMIoHgEABhU5zCBWMDOch0OiebycJ14eUhggYJ3JPChZLqgLFNwITR0AiceIJ9xfWLdRLJR3Ot3dJRerIQHIEfLAcGuTPpZxXO7lNiVPh4OoNZrpdpiLq9fqDEb-XLDFiUGj0BDWvb6A5HOXjfOu93FsA3DNJr5vB2Rwseks-f5VwFwU6zXzpaQVgiCBDSdtNL7dzrdYZXAZDK3ZoqaYEwUEqqEYRNBEiBrDd0iuOMIGkX4bRAyEgzwENbXgopThdck4AAa21K4hxHI9UIhNAZEgi82AAOjgWBXDwf4oOkKiaN7CifE9KBOivAAGFZUNkOCQOA+CI2dFUiixRDkKEyEjHNYDP30G1jFML5GjQWZnDAjwInJM8IBkKDPBCaNw0jVNg1PbMEiSAhVPUvBS3LStwUMgARcg8HIZxiBeDZ5iWHRIlSPytjkABtABdKds1nY55Ts2Ybhc9IwHczyrzCnz1jUEB1AeYKcs3JF1DkCLGB2ZwEocg8ASKE99DPLSADFDjgb0WBPGA6GqWZ-MWZhF13FdHLAML1C0rMQAikd8hvURxDBPECDwitpKKFsqAoxRlFaIs0FJRaiLcjzyAojAZSuK46BO-CCDGpb4OuzyKPRcqHpAhs2Fu6oPjSDU7m1XUiAokGnvII1hjeoiIt+KGQNhlUwuOzyystadvwQX9-yWwCLXe4ANrwCje3mA7mtav4zouq4wte9cYBh1blrE1VBuXT1PCwhB4m1dF5Am9JAa6dwIZZ35YIA2SgLRnZsxZHB8AIBhWHIQZCCqsYQFkIA

Repro steps

1. Create a component A
2. Add a prop P to component A. This prop must be a render function that receives a RefObject and returns a ReactNode
3. Use the useRef hook in component A and initialize it with null
4. Invoke the render function passed in prop P with the ref from the previous step

Notes:

• I'm not absolutely certain if this is an error on the compiler plugin or if I am not fully understanding what the error is supposed to be. If it is an error on my end, then I would say this error message needs to be improved.
• The repro link has a complete example of a scenario where this error could arise. The bug itself is only triggered in the MuteControls component.
• The only ref value access in the repro link (videoRef.current) is in the onClick function of the button in MuteControls. Commenting this does not make the error disappear, so the error is triggered without any value access
• Using useMemo to memoize the renderVideo call does not make the error dissapear neither

How often does this bug happen?

Every time

What version of React are you using?

18.3.1

What version of React Compiler are you using?

eslint-plugin-react-compiler@19.0.0-beta-27714ef-20250124

[josephsavona]

Thanks for posting about this. In this case, the compiler cannot know what the renderVideo(videoRef) call is doing. It doesn't know whether that function will access the videoRef.current or not, but realistically most such functions are likely to do so (if all you can do is store a reference to videoRef itself, then there's not much a helper function can do). Therefore, we report an error since you are likely violating the rule about accessing refs during render.

I'll leave this open as a reminder for us to improve the error message to make this more clear.

[fdelu]

Thanks for posting about this. In this case, the compiler cannot know what the renderVideo(videoRef) call is doing. It doesn't know whether that function will access the videoRef.current or not, but realistically most such functions are likely to do so (if all you can do is store a reference to videoRef itself, then there's not much a helper function can do). Therefore, we report an error since you are likely violating the rule about accessing refs during render.

I'll leave this open as a reminder for us to improve the error message to make this more clear.

Sounds good. As a workaround then, I'll pass the child component type as a prop instead of passing a render function. Thank you for the explanation!

[josephsavona]

Thanks again for reporting! Note that you can now pass refs to functions if their result is directly interpolated into JSX, so the original <div>{renderVideo(ref)}</div> call is now allowed in your example. There's a different issue where the compiler thinks a value is getting mutated and it can't preserve memoization, but the original ref issue is fixed. I'll leave this open because the example seems like it should compile. #34006 for the ref fix though.

[josephsavona]

I'm moving the memoization issue to #34232 and closing this since the ref thing is fixed. Thanks again for posting!