[compiler] Allow inferred non-optional paths when manual deps were op…

…tional

If the inferred deps are more precise (non-optional) than the manual deps (optional) it should pass validation.

The other direction also seems like it would be fine - inferring optional deps when the original was non-optional - but for now let's keep the "at least as precise" rule.

ghstack-source-id: 9f7a99ee5f7caa2c2d96f70f360e4320bac3de2d
Pull Request resolved: #30816

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

@@ -167,12 +167,16 @@ function compareDeps(
 
   let isSubpath = true;
   for (let i = 0; i < Math.min(inferred.path.length, source.path.length); i++) {
-    if (
-      inferred.path[i].property !== source.path[i].property ||
-      inferred.path[i].optional !== source.path[i].optional
-    ) {
+    if (inferred.path[i].property !== source.path[i].property) {
       isSubpath = false;
       break;
+    } else if (inferred.path[i].optional && !source.path[i].optional) {
+      /**
+       * The inferred path must be at least as precise as the manual path:
+       * if the inferred path is optional, then the source path must have
+       * been optional too.
+       */
+      return CompareDependencyResult.PathDifference;
     }
   }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep-non-optional-in-body.expect.md

@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+function Component(props) {
+  const data = useMemo(() => {
+    // actual code is non-optional
+    return props.items.edges.nodes ?? [];
+    // deps are optional
+  }, [props.items?.edges?.nodes]);
+  return <Foo data={data} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+function Component(props) {
+  const $ = _c(4);
+
+  props.items?.edges?.nodes;
+  let t0;
+  let t1;
+  if ($[0] !== props.items.edges.nodes) {
+    t1 = props.items.edges.nodes ?? [];
+    $[0] = props.items.edges.nodes;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  t0 = t1;
+  const data = t0;
+  let t2;
+  if ($[2] !== data) {
+    t2 = <Foo data={data} />;
+    $[2] = data;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep-non-optional-in-body.js

@@ -0,0 +1,9 @@
+// @validatePreserveExistingMemoizationGuarantees
+function Component(props) {
+  const data = useMemo(() => {
+    // actual code is non-optional
+    return props.items.edges.nodes ?? [];
+    // deps are optional
+  }, [props.items?.edges?.nodes]);
+  return <Foo data={data} />;
+}