Passing a function during render to accesses ref causes compiler bailout - Ref values (the current property) may not be accessed during render

[aeharding]

Hi there! I have a component that passes a function for modal dismissal that checks a ref. This causes Compiler to throw an error: InvalidReact: Ref values (the current property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:14)

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAwgIYA21ARpXANYA0JZASggGZukIBlPJTwICAXwLcYEDAQA6IGAkZ5FAbnkA7bdyha4eNBC0EAImjAZLYSnWoIAshAAmNABTE4ACzTUXylrIBIEuCDDObtTkJqJaeGASAJRE2gQEcCZghHCUWhZWNlzcBAC87AjF7tw0ZEnaaRlZhC6W1mCJ5fxUtAzM7u4ppQB8qabpBGgl7gCEufltRTwAdHCwgXgpyniwWpo64+kA9EcEACoA8mYXBK2FHTQE1BAA5mhwjeJsANrzBe1gYoAXSS+0a212IQQWjCEVcNBi8WhCU8jXSdwBLE+9S04gaWhO7EoLwQ+L0BiMJgIjgAnpEPClgOCEDsYKYADz-Gx2Bz06jDNFETy3RYdZJlUbs2l8xFxBIi+5gUrADE2SRHYZ48bso5ch72Jzw-naLXaEDiIA

I don't believe this violates the Rules of React (correct me if I'm wrong). Is there a good workaround for this issue, or is it a known compiler bug? I see react/react#30843 - is this a false positive?

[itsdouges]

Howdy! I get something similar where I'm passing a ref to chidren as function. Playground here: https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCASggGYEC+BVMEGBAOiDAgIZx7sDcrAHaYc+IgTwBPLAgKUhAEwQwAkkKxRC9RszYgAdAHppssAOHCEADzGEqUIbzQQhBAEIQIAG25D1mngAFMDCBARwABZo3oqcQgA0wrTIRGER0bHxqQrKahpaADzEylRcUN54AMKRCHAA1giKqQBGXr5cbrQAfIJCtACUaW4RrmCEnDQAvCRklFSFABIAKgCyADIBWgCivhgIQnjdQUIV3gCEA33pnHiwblExcQdB6eGhI+HhpeWVNXWNZoEc7nNAiPBoLjeABqUKgCCSny+aCB3i4LQQ3gIAH4CEIuPsCABqfQAfXYxIIaIxWNS+P2iK+X1cNU6AHMEKkWZF2QhFp1FL4YIymQRJiLwrQJUQpekrslhCBaEA

import { useRef } from "react";
import { type RenderInput } from "./types";

export function BooleanInput({
  children,
}: {
  children: RenderInput<{ defaultChecked: boolean }>;
}) {
  const ref = useRef<HTMLInputElement>(null!);

  return children(
    {
      defaultChecked: !!initialValue,
      id: label ? name + "_" + label : name,
      onChange: onChangeHandler,
      ref,
    },
    {},
  );
}

The ref isn't being accessed here so the error isn't the most helpful. Is there a canonical alternative for children as function props being passed the ref?

It also seems to error if another object has been declared as the second arg even if it accesses no refs (it is in the callback however): https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEeAnlggcADoB2BBAQhBADYICG1AMmngjG8wAqpBABoadAHJQMAIz7de-ISPG0CAZTww01AOaK+A4WTUBfAgDMYEDAUogAAtrRZWADwD0YPgDc+DgDcNJg4+BQSBFA+AKKWlghweGp00QgASgiWKUQiBADCABYceggx-tR4ABIcACasMDkkZAQA0gjEshBsMLXlCJU11PV85lY2dg4w7ElBIdi4hMBRPoIIrBgI2sSiuS0AgkloENQAkrUabAkEFta29iAAdI+evBtbMMRz1KGLFHvkTLDPinahYKCEW4TB4vZoIMDfGgIdxhQiWKDUI4nAiGZQAVR+J1B4LwAAoqOo2FizrUcnBCmhmLVptQcrUsmwoMw8AA1ARQcgAXgeDhy1DYmxyJyKJTEkWlJ0saBgGByZBgYDQYF4tT5zAFOWmAEcoMqELTIr5+fDzMgIpTqec7Yc8McaZcEsF1PTGcyBnageyYMSIQAeSJ0Cl0aMEdmWTncvUCu3anT6AgAHwI1Bk8hgmaiwKV1HNXpjdGlxX0CDtMur-UGdQaoaqggAspwNOtEngYu9KgA+Mvlk7tYgAEQgAHdqHax10en0KtUm3wW+3O92kn2EJtB8OYxAsK6TmA7QBtZhseTMFMufS7K36msEVO6PQAXXPH4PNxydFbDsu1Ybd+2SCN-jgVgejtUkAEoCEFAcCF8CA0FqQICC1JMEAABT4TVtXNO0uhYdhaDMSIh0iOME15a0AH47zTPRh3FTZmPfYdK1lWCn2TbNcz4As33TLNSOg2gswxONdHNBCkJQtCMPlah8kVZUMD4607RzORhKzUS9ALCTyILGSsjk2oFOQ1D0OHdVCJ1HCmNfe9jKzPS8xMphJOHY1TWmWpXNMjhh34+FYK0FjcWMPIs2kfSYFilQWizRgyI4FKTAQODvy9MwEKjAg4FPQg3l3D5iEQlYEDWd5tng4dSuobUCGmSwarSTJOtDAhAM3EDezAghkNJHNmGYABCODmrKrCwBw8dLJLWoascrVnOtAgpsFYULOLUsaEiNI4gSJJSXgxDkOKugWra3R2XcGqIrAR5i1qUEnsu3wbJQx5mB4IxmEQvaCA2ojdWtWaIPuwhaK5PAvuRF7rTej7kfcH6-t8AGgeUUHhQRxNod-DrHjgWAWTwR4IsQiC6EelHduFABaABGAgGIIAADAASYAmfcMweYIO1iaR4FnpZggOa53mBYlzGRbFkUQGHMxdnPCWcN2CGtufR80Y-GHqEiOGCB46shhGGBayrUoGxXYZmwG4Cex3Pc8GQ4VSVy677RjC3KZgamcPWgjNvNcOGO5g6rN-C2S3cejn0xmqEEePAelKGm6djwtZNWr0ILQTrxuRVOBXTvb9qLKyCAAMkb9qEBNM1rMD8tPE8TQAGtXAIKtbawzq8EKchk8IOmtULlbzQIOosLwAByMBW-boKGdbvBYGoX9KLN9Q7vmqfw+FV7z0SvMK5TnDMbgj88aUARfzLghSRDsPtpls-oa7mMPcCCnE6lPFC21Z5FwXlOcgcABDMFkFSPuBB1g+AIDAxeXR8CPG3kAwQDJ16z3kHAtIRAJ4lWgvmBAy4h6rnzMPVg69dzHmqq9HBx9oxW1KLfKuuVfwVjUhpFUPCcKm3LEQbsmxtiPGoQMMk-NgBUhPDSMwAB9FqSoVQ8zEdGQ+dAzAl29PNaUlCapXUUrdEq80hao2fOjR6mNsYB1xoDF+INa7g0jpDURZMsgUypnI2m21hQ2JlnLbmCihYqztA4REHCuEIFJPHVaOiBHqWoJojAST64pN-BVKRnwZHLlJAopRbpzhqKguwGA2iNaGJPq1Qgo4OiThnDbBoc4OgLl6E7dpa43ZbmGpVQcZj-YWNLuXTOfcOiEwePQJBYAsBUgQA4JuLcpoBQ7kVbeJjqlNW3uTL+gTZD6hgPsjhdB8lVSKXIkpAsylElqJUyhtSIJ6JuPUqxjTwZXkQIUFgQYADyx43QXivDeTiD5wHPkhZ+Gq54IIOHdkkaFApng4JAP+NWOQfzm2MSC08YLrzrFhUbGFbkWJfg-LYgUb0MBsCwKSCCpIIq7CFn9c8CiIoA2JSDDMWZuWuOBiLXYkSpYiw-DkU2kRpi7xgLQH0TIWRMo4ZYugOsdKovhO9BxUsnGKRcfjAQsz9bR2hlixmtRdISjlBcy2akHYvgSX0xoOzqBjlabOe1HrpzUBdRay2BLWp2mwtaZah01rcyPMo9eF43DLP+UyPgwLlG7HRdGt0YBJUHKyFizWEFlhVJgva-IlC2WLWtPhDUUcrULSWvPNa+b1Cm0PiAMwQA