[Compiler Bug]: Compiler doesn't bail out when reading or writing `ref.current` during a render about react

[josephsavona]

Thanks for posting. First note that refs are fine to access outside of render — in particular, in event handlers and effects. It's okay to access refs in a callback function, so long as that callback is only called outside of render.

So in your example, useStableRef() technically violates the rules. It's a KP that we're not catching it when ValidateNoRefAccessInRender is enabled, that's part of why that validation is off by default. useCallbackRef() technically doesn't violate the rules, but there's a huge caveat — it's only safe to call the resulting callbacks from outside of render.

Calling a callback created by this hook during render would mean that (just like accessing a ref) your UI could grow stale.

I'd give it a try and see.

[jthemphill]

Oh, I didn't notice "validateRefAccessDuringRender": false in the EnvironmentConfig. Figured out how to enable it, but it doesn't seem to stop the compile from happening...

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgAIDcCGANgJYAm+ALggEoIBmAgnImGACKzEB2A5rV6QQxkFGFAQAdLlLQAqWVMyzMAMShc4FYhC6ZSEOACNCBgNbJFyy5gkgAmsQSFSYTPkwx6QhFy1FCAJ6YYBT4xgiYtHSYEIYAVgiamBQAFpSYxK5EAO74AWDWcDpgmVS+mNnEqckpEQC2ECEeiT4UmASE4pg8xLg+AHS21tYACjCxYYHBKdDOXADkbUV1AA7EhBGGifhQYBFVmHVQoVRZzdGknLw1krrKngJCmMgAFMN3mADKM1DON5jLNYbGAAyhwFI1TIAfksaCkdHUmm0ul2CE+oXCUReHXEAEpMMBFADim1PNEALyYVFYnEIXEAbiJZP6cFgDzalNpjN0zQosF0ZO5AF8pDJ5NY1BotDo9AZjGYLB9hiBaHyYFwzmTvL5iP4gggAI5QIigwiEQz4OCmGK6BB9GBBB6CGCDO7KgCqXBIpgiAANUQBhfwWq2+gA0-zgwct1v0CFcXAgSzSvAi2Vq0g+ghWPkEGkcrnB+FTgxA7yUmAAKilMhlXKjSBldHVi0EVoRLfG3HBxqwYrBiYILXt+pgAJKuA5gfB0W4VigQKl7SMQVbrJ4y6AgopD-DLrZ0CCeCoIeZ9AEbYsIUjWVLxiJQFYwu5wrgIqXIpcIINmkOmLFRr+Mb4oSPJFBqpL0JglKouikw0PQLyAeawHcpgvL8l+P4oVabw8uhLz9ER+AwDwYD4uSAB85wsmyrSEcRpHkWGRLoQA2qx6HnCx+GYAAujx6EMlIQogEKQA

[jthemphill]

🥳🥳🥳