From 19e82a3a8ae19943fc668da67fda2bdcb76b0e28 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Thu, 22 Aug 2024 16:51:55 -0700
Subject: [PATCH] [compiler] Repros for missing memoization due to lack of phi
 type inference

This is a complex case: we not only need phi type inference but also need to be able infer the union of `MixedReadonly | Array`.

ghstack-source-id: 935088910dd8c210b3253cf8ff1f4b935f5081b7
Pull Request resolved: https://github.com/facebook/react/pull/30793
---
 ...ng-memoization-lack-of-phi-types.expect.md |  42 +++++++
 ...o-missing-memoization-lack-of-phi-types.js |  19 +++
 ...lack-of-phi-types-explicit-types.expect.md | 108 ++++++++++++++++++
 ...zation-lack-of-phi-types-explicit-types.js |  22 ++++
 4 files changed, 191 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.expect.md
new file mode 100644
index 0000000000..d70b36133f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+function Component() {
+  const data = useFragment();
+  const nodes = data.nodes ?? [];
+  const flatMap = nodes.flatMap(node => node.items);
+  const filtered = flatMap.filter(item => item != null);
+  const map = useMemo(() => filtered.map(), [filtered]);
+  const index = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
+
+```
+
+
+## Error
+
+```
+   8 |   const flatMap = nodes.flatMap(node => node.items);
+   9 |   const filtered = flatMap.filter(item => item != null);
+> 10 |   const map = useMemo(() => filtered.map(), [filtered]);
+     |                                              ^^^^^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly (10:10)
+
+CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (10:10)
+  11 |   const index = filtered.findIndex(x => x === null);
+  12 |
+  13 |   return (
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.js
new file mode 100644
index 0000000000..a2d5b5d471
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missing-memoization-lack-of-phi-types.js
@@ -0,0 +1,19 @@
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+function Component() {
+  const data = useFragment();
+  const nodes = data.nodes ?? [];
+  const flatMap = nodes.flatMap(node => node.items);
+  const filtered = flatMap.filter(item => item != null);
+  const map = useMemo(() => filtered.map(), [filtered]);
+  const index = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md
new file mode 100644
index 0000000000..4921fd340b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees @enableUseTypeAnnotations
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+// This is a version of error.todo-repro-missing-memoization-lack-of-phi-types
+// with explicit type annotations and using enableUseTypeAnnotations to demonstrate
+// that type information is sufficient to preserve memoization in this example
+function Component() {
+  const data = useFragment();
+  const nodes: Array<any> = data.nodes ?? [];
+  const flatMap: Array<any> = nodes.flatMap(node => node.items);
+  const filtered: Array<any> = flatMap.filter(item => item != null);
+  const map: Array<any> = useMemo(() => filtered.map(), [filtered]);
+  const index: Array<any> = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { useFragment } from "shared-runtime";
+
+function Component() {
+  const $ = _c(11);
+  const data = useFragment();
+  let t0;
+  if ($[0] !== data.nodes) {
+    t0 = data.nodes ?? [];
+    $[0] = data.nodes;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const nodes = t0;
+  let t1;
+  if ($[2] !== nodes) {
+    t1 = nodes.flatMap(_temp);
+    $[2] = nodes;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const flatMap = t1;
+  let t2;
+  if ($[4] !== flatMap) {
+    t2 = flatMap.filter(_temp2);
+    $[4] = flatMap;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const filtered = t2;
+  let t3;
+  let t4;
+  if ($[6] !== filtered) {
+    t4 = filtered.map();
+    $[6] = filtered;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  t3 = t4;
+  const map = t3;
+  const index = filtered.findIndex(_temp3);
+  let t5;
+  if ($[8] !== map || $[9] !== index) {
+    t5 = (
+      <div>
+        {map}
+        {index}
+      </div>
+    );
+    $[8] = map;
+    $[9] = index;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}
+function _temp3(x) {
+  return x === null;
+}
+function _temp2(item) {
+  return item != null;
+}
+function _temp(node) {
+  return node.items;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js
new file mode 100644
index 0000000000..914ef6199d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js
@@ -0,0 +1,22 @@
+// @flow @validatePreserveExistingMemoizationGuarantees @enableUseTypeAnnotations
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+// This is a version of error.todo-repro-missing-memoization-lack-of-phi-types
+// with explicit type annotations and using enableUseTypeAnnotations to demonstrate
+// that type information is sufficient to preserve memoization in this example
+function Component() {
+  const data = useFragment();
+  const nodes: Array<any> = data.nodes ?? [];
+  const flatMap: Array<any> = nodes.flatMap(node => node.items);
+  const filtered: Array<any> = flatMap.filter(item => item != null);
+  const map: Array<any> = useMemo(() => filtered.map(), [filtered]);
+  const index: Array<any> = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}