Replies: 1 comment
-
The return type of The second kind of ref is a const ref = useRef();
useEffect( () => { console.log( 'element', ref.current ); }, [] );
return <div ref={ref} />; It's this kind of refs that React Compiler cares about, because it traces the accesses to The question is how we should name the first kind of ref. I think the |
Beta Was this translation helpful? Give feedback.
-
As of #61788, we have the ESLint plugin enabled for React Compiler in preparation for enabling it eventually.
One of the options in the ESLint plugin that is currently enabled is
enableTreatRefLikeIdentifiersAsRefs
for the compiler. It will likely be enabled by default in the compiler based on discussions in reactwg/react-compiler#36. However, relying on variable names can break some code when the compiler is run according to facebook/react#31406.Basically, anything with a
Ref
suffix will be treated as aRefObject<T>
which has aref.current
property.In Gutenberg, we use the
Ref
suffix also forRefCallback<T>
variables because they get put in the sameref
prop as theRefObject<T>
in React components.I'm wondering if we should actually have a different suffix for
RefCallback<T>
variables (such as the ones returned fromuseMergeRefs
) because they don't have aref.current
property like theRefObject<T>
variables?This could get fixed the compiler before the final release, but the benefit that we would get right now, before enabling the compiler, is flagging incorrect assignment of the
ref.current
property that doesn't exist on aRefCallback<T>
with the ESLint rule in JavaScript.See this demo in React Playground.
https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgAIIHYCGARgDYIAqMCBALgEoIBmAMgJYDWCAkgCb42tGrBDDABBMA0ZhMAXkw0YUBAG4AOng0Y5s3Xv0HDR4ycNasAOQIBbBDIiNMVAOZQSBGJihgEUp0xkeCDs8AHIaTB8EawUITGtaGhEAOnMdUwzMrP0NDUYoPDgBCDxMAFkATykACgBKTGANTEw4ErAI6yqmOS8fGrw3Elr1Ut6EAFFGRgQi6rq5AD4Gpub4rsZkuFgqPAj5AZISEeaAX2GVqhpYUoAeHlYAN39GWWBOqRPMNAWRk9y8fKFYqlSoAeSIACsZjR5o1Rq08O01uCoUUet5fExqgchscxpNprN5rIlnDVl80CtmtoAGIEEg+TAABwgYFYAgeCCpFO52nGAGU2LtkOUoDRaKw8M5MARMA96cp-FcYHgEDxMIwYBAYrLAUVWCVMAB3AAWrIQSuucoVFrAZrc6rwEAiRAt1jFtDVqVGzU6KOhm22-B6OLxZzxlytd0ez1efsh0M+31+-202XTGaMaQYytV6qo0hlO3CMsOECNatimFd8Q9SR43rTmebGf+euBYxz1xqkvZrHp9TJFJabQiBfRfSxvYEA7x2kjKueEYQuc7U7wfdnGj+mgBBX1hsqXZVUhqg5WCKR7xX1zVfnkGOPeH6g3OowxBOhc3qJOWPrWT53kwgYwDseyYKGKzhhcN6LtGTwFnGXS5kBjBJj825tvuHZHrBz5MP6sznvCo4AXhaqEeBj54S+hxvs0H5TF+xKkryWACkKNAimUdaStKsryiQioLnmGpajqGrYQapSmualqLoJip2tAJCOs61ZunWXpsZgXB4IJrA8AwBBFNxvFSjK1pCRaImVpq2qWe20nGmajIiVZSn2qpEHqTW7rivW3rkto14oTwlEgWBIaDGG9Hybc9wIUwSGAeFCZFOhKa7k2La5Rk2bkeqcD0iQRAmewMgmgQnI+S0Qa7MyWpMiINAVFWJmIGAMgEHgFRGgQFSNlgeUjSYWFAs5H6crs1TFYcZVwOwxHNJeY7dA+k6MN+iwNJg0Hvj4ek+DAwKfkSP6sf+BaRcG8hzaV5Wxcuq4YgAwiVC3sHMyQ-R4zhgBdzw3bsAD8yTVD9yR-QDAA0mAANoALpvjueRSYeFTjNN9BYstI6Ih0mPY-e+LY9tv7AHtcWMYSMIsX+wWUv+tL0oyqrOBKnJsdynRY-wUjA+BkGjPtzTufBsZvET-NMJlmG7k5GN87s73zeVsIXqRvPY6rD2LROExk-TlOi-iTHnTtQ7UuxgqSlxooBXxlmKTZhViQ5urozJrmu6uLuRF5akuppAXaczWB6QZRnUKZDsShZAk2vFdniY5XsuXJ7n+8pDo+cHtahw2Ona-wuufYL0WHE9MGrhLiFS8rNBl+Vct4KjeA5aNXe6GkACqbIJ4cCgmharTWCyqq7DIkDDwgbUeBaJX+CZVWkAgQ3pN3Xf-AgAAeLInZgfCMAQbgRIrIIVGITJMhrozudU3I3As3LNDcuGON8r+YO-FSUV8L9-xv1wrmU83Qv5AJ-iA7sBF0oRAgeSYB0tdh+AQYg3+jdm76zQW-NBKMNAgBOEAA
Beta Was this translation helpful? Give feedback.
All reactions