[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?

[email protected]

[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!