[compiler] Fix to ref access check to ban ref?.current

ghstack-source-id: ea417a468e
Pull Request resolved: https://github.com/facebook/react/pull/31360

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts

@@ -214,16 +214,24 @@ function joinRefAccessTypes(...types: Array<RefAccessType>): RefAccessType {
         return b;
       } else if (b.kind === 'None') {
         return a;
-      } else if (a.kind === 'Guard' || b.kind === 'Guard') {
+      } else if (a.kind === 'Guard') {
-        if (a.kind === 'Guard' && b.kind === 'Guard' && a.refId === b.refId) {
+        if (b.kind === 'Guard' && a.refId === b.refId) {
           return a;
+        } else if (b.kind === 'Nullable' || b.kind === 'Guard') {
+          return {kind: 'None'};
+        } else {
+          return b;
         }
-        return {kind: 'None'};
+      } else if (b.kind === 'Guard') {
-      } else if (a.kind === 'Nullable' || b.kind === 'Nullable') {
+        if (a.kind === 'Nullable') {
-        if (a.kind === 'Nullable' && b.kind === 'Nullable') {
+          return {kind: 'None'};
-          return a;
+        } else {
+          return b;
         }
-        return {kind: 'None'};
+      } else if (a.kind === 'Nullable') {
+        return b;
+      } else if (b.kind === 'Nullable') {
+        return a;
       } else {
         return joinRefAccessRefTypes(a, b);
       }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md

@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  return ref?.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+  3 | function Component(props) {
+  4 |   const ref = useRef();
+> 5 |   return ref?.current;
+    |          ^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.js

@@ -0,0 +1,11 @@
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  return ref?.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};