@samitouri / QOS-React-1 Mirror · read-only / commits / ed8dd2036b
Fork 0

The library for web and native user interfaces.

Mirrored from https://github.com/247TaxiDriver/QOS-React.git

Synced Nov 11, 12:30 UTC

[compiler] Allow more instruction kinds btw merged scopes

Updates our scope merging pass to allow more types of instructions to intervene btw scopes. This includes all the non-allocating kinds of nodes that are considered reorderable in #29863. It's already safe to merge scopes with these instructions — we only merge if the lvalue is not used past the next scope. Additionally, without changing this pass reordering isn't very effective, since we would reorder to add these types of intervening instructions and then not be able to merge scopes. Sequencing this first helps to see the win just from reordering alone. ghstack-source-id: 79263576d8eaeb45ef4d1ec4951478459853a287 Pull Request resolved: https://github.com/facebook/react/pull/29881

Joe Savona committed Jun 12, 2024 at 15:40 UTC ed8dd2036bfd228638e40f0559f652d062ce0689
27 files changed +217 -411
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts
+5 -1
@@ -186,11 +186,15 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
186 }
187 case "instruction": {
188 switch (instr.instruction.value.kind) {
189 + case "BinaryExpression":
190 case "ComputedLoad":
191 case "JSXText":
192 + case "LoadGlobal":
193 case "LoadLocal":
194 case "Primitive":
193 - case "PropertyLoad": {
195 + case "PropertyLoad":
196 + case "TemplateLiteral":
197 + case "UnaryExpression": {
198 /*
199 * We can merge two scopes if there are intervening instructions, but:
200 * - Only if the instructions are simple and it's okay to make them
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md
+3 -6
@@ -67,19 +67,16 @@ function Component() {
67 }
68 useEffect(t1, t2);
69 let t3;
70 + let t4;
71 if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
72 t3 = () => {
73 setState(someGlobal.value);
74 };
74 - $[3] = t3;
75 - } else {
76 - t3 = $[3];
77 - }
78 - let t4;
79 - if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
75 t4 = [someGlobal];
76 + $[3] = t3;
77 $[4] = t4;
78 } else {
79 + t3 = $[3];
80 t4 = $[4];
81 }
82 useEffect(t3, t4);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md
+3 -6
@@ -66,19 +66,16 @@ function Component() {
66 }
67 useEffect(t1, t2);
68 let t3;
69 + let t4;
70 if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
71 t3 = () => {
72 setState(someGlobal.value);
73 };
73 - $[3] = t3;
74 - } else {
75 - t3 = $[3];
76 - }
77 - let t4;
78 - if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
74 t4 = [someGlobal];
75 + $[3] = t3;
76 $[4] = t4;
77 } else {
78 + t3 = $[3];
79 t4 = $[4];
80 }
81 useEffect(t3, t4);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md
+3 -6
@@ -66,19 +66,16 @@ function Component() {
66 }
67 useEffect(t1, t2);
68 let t3;
69 + let t4;
70 if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
71 t3 = () => {
72 setState(someGlobal);
73 };
73 - $[3] = t3;
74 - } else {
75 - t3 = $[3];
76 - }
77 - let t4;
78 - if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
74 t4 = [someGlobal];
75 + $[3] = t3;
76 $[4] = t4;
77 } else {
78 + t3 = $[3];
79 t4 = $[4];
80 }
81 useEffect(t3, t4);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md
+3 -6
@@ -54,19 +54,16 @@ function Component() {
54 }
55 useEffect(t0, t1);
56 let t2;
57 + let t3;
58 if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
59 t2 = () => {
60 setState(someGlobal);
61 };
61 - $[2] = t2;
62 - } else {
63 - t2 = $[2];
64 - }
65 - let t3;
66 - if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
62 t3 = [someGlobal];
63 + $[2] = t2;
64 $[3] = t3;
65 } else {
66 + t2 = $[2];
67 t3 = $[3];
68 }
69 useEffect(t2, t3);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md
+3 -6
@@ -70,19 +70,16 @@ function Component() {
70 }
71 useEffect(t0, t1);
72 let t2;
73 + let t3;
74 if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
75 t2 = () => {
76 setState(someGlobal.value);
77 };
77 - $[2] = t2;
78 - } else {
79 - t2 = $[2];
80 - }
81 - let t3;
82 - if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
78 t3 = [someGlobal];
79 + $[2] = t2;
80 $[3] = t3;
81 } else {
82 + t2 = $[2];
83 t3 = $[3];
84 }
85 useEffect(t2, t3);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md
+4 -11
@@ -15,24 +15,17 @@ function component() {
15 ```javascript
16 import { c as _c } from "react/compiler-runtime";
17 function component() {
18 - const $ = _c(2);
18 + const $ = _c(1);
19 const [x, setX] = useState(0);
20 let t0;
21 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
22 - t0 = (v) => setX(v);
22 + const handler = (v) => setX(v);
23 + t0 = <Foo handler={handler} />;
24 $[0] = t0;
25 } else {
26 t0 = $[0];
27 }
27 - const handler = t0;
28 - let t1;
29 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
30 - t1 = <Foo handler={handler} />;
31 - $[1] = t1;
32 - } else {
33 - t1 = $[1];
34 - }
35 - return t1;
28 + return t0;
29 }
30
31 ```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md
+16 -36
@@ -36,65 +36,45 @@ function mayMutate() {}
36 ```javascript
37 import { c as _c } from "react/compiler-runtime";
38 function ComponentA(props) {
39 - const $ = _c(6);
40 - let a;
41 - let b;
39 + const $ = _c(2);
40 + let t0;
41 if ($[0] !== props) {
43 - a = [];
44 - b = [];
42 + const a = [];
43 + const b = [];
44 if (b) {
45 a.push(props.p0);
46 }
47 if (props.p1) {
48 b.push(props.p2);
49 }
51 - $[0] = props;
52 - $[1] = a;
53 - $[2] = b;
54 - } else {
55 - a = $[1];
56 - b = $[2];
57 - }
58 - let t0;
59 - if ($[3] !== a || $[4] !== b) {
50 +
51 t0 = <Foo a={a} b={b} />;
61 - $[3] = a;
62 - $[4] = b;
63 - $[5] = t0;
52 + $[0] = props;
53 + $[1] = t0;
54 } else {
65 - t0 = $[5];
55 + t0 = $[1];
56 }
57 return t0;
58 }
59
60 function ComponentB(props) {
71 - const $ = _c(6);
72 - let a;
73 - let b;
61 + const $ = _c(2);
62 + let t0;
63 if ($[0] !== props) {
75 - a = [];
76 - b = [];
64 + const a = [];
65 + const b = [];
66 if (mayMutate(b)) {
67 a.push(props.p0);
68 }
69 if (props.p1) {
70 b.push(props.p2);
71 }
83 - $[0] = props;
84 - $[1] = a;
85 - $[2] = b;
86 - } else {
87 - a = $[1];
88 - b = $[2];
89 - }
90 - let t0;
91 - if ($[3] !== a || $[4] !== b) {
72 +
73 t0 = <Foo a={a} b={b} />;
93 - $[3] = a;
94 - $[4] = b;
95 - $[5] = t0;
74 + $[0] = props;
75 + $[1] = t0;
76 } else {
97 - t0 = $[5];
77 + t0 = $[1];
78 }
79 return t0;
80 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md
+5 -11
@@ -17,25 +17,19 @@ function Component(props) {
17 ```javascript
18 import { c as _c } from "react/compiler-runtime";
19 function Component(props) {
20 - const $ = _c(2);
20 + const $ = _c(1);
21 let t0;
22 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
23 - t0 = () => {
23 + const onEvent = () => {
24 console.log(42);
25 };
26 +
27 + t0 = <Foo onEvent={onEvent} />;
28 $[0] = t0;
29 } else {
30 t0 = $[0];
31 }
30 - const onEvent = t0;
31 - let t1;
32 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
33 - t1 = <Foo onEvent={onEvent} />;
34 - $[1] = t1;
35 - } else {
36 - t1 = $[1];
37 - }
38 - return t1;
32 + return t0;
33 }
34
35 ```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md
+5 -11
@@ -27,26 +27,20 @@ import { c as _c } from "react/compiler-runtime";
27 import { Stringify } from "shared-runtime";
28
29 function Component(props) {
30 - const $ = _c(2);
31 - let callback;
30 + const $ = _c(1);
31 + let t0;
32 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
33 let x;
34 x = null;
35 - callback = () => {
35 + const callback = () => {
36 console.log(x);
37 };
38
39 x = {};
40 - $[0] = callback;
41 - } else {
42 - callback = $[0];
43 - }
44 - let t0;
45 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
40 t0 = <Stringify callback={callback} shouldInvokeFns={true} />;
47 - $[1] = t0;
41 + $[0] = t0;
42 } else {
49 - t0 = $[1];
43 + t0 = $[0];
44 }
45 return t0;
46 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md
+4 -11
@@ -18,7 +18,7 @@ function Component() {
18 ```javascript
19 import { c as _c } from "react/compiler-runtime";
20 function Component() {
21 - const $ = _c(2);
21 + const $ = _c(1);
22 let t0;
23 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
24 let x;
@@ -27,20 +27,13 @@ function Component() {
27 x = 9;
28 };
29
30 - t0 = bar(foo);
30 + const y = bar(foo);
31 + t0 = <Child y={y} />;
32 $[0] = t0;
33 } else {
34 t0 = $[0];
35 }
35 - const y = t0;
36 - let t1;
37 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
38 - t1 = <Child y={y} />;
39 - $[1] = t1;
40 - } else {
41 - t1 = $[1];
42 - }
43 - return t1;
36 + return t0;
37 }
38
39 ```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md
+28 -43
@@ -56,7 +56,7 @@ function useFragment(_arg1, _arg2) {
56 }
57
58 function Component(props) {
59 - const $ = _c(15);
59 + const $ = _c(9);
60 let t0;
61 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
62 t0 = graphql`...`;
@@ -65,67 +65,52 @@ function Component(props) {
65 t0 = $[0];
66 }
67 const post = useFragment(t0, props.post);
68 - let media;
69 - let allUrls;
70 - let onClick;
68 + let t1;
69 if ($[1] !== post) {
72 - allUrls = [];
70 + const allUrls = [];
71
74 - const { media: t1, comments: t2, urls: t3 } = post;
75 - media = t1 === undefined ? null : t1;
76 - let t4;
77 - if ($[5] !== t2) {
78 - t4 = t2 === undefined ? [] : t2;
79 - $[5] = t2;
80 - $[6] = t4;
81 - } else {
82 - t4 = $[6];
83 - }
84 - const comments = t4;
72 + const { media: t2, comments: t3, urls: t4 } = post;
73 + const media = t2 === undefined ? null : t2;
74 let t5;
86 - if ($[7] !== t3) {
75 + if ($[3] !== t3) {
76 t5 = t3 === undefined ? [] : t3;
88 - $[7] = t3;
89 - $[8] = t5;
77 + $[3] = t3;
78 + $[4] = t5;
79 } else {
91 - t5 = $[8];
80 + t5 = $[4];
81 }
93 - const urls = t5;
82 + const comments = t5;
83 let t6;
95 - if ($[9] !== comments.length) {
96 - t6 = (e) => {
84 + if ($[5] !== t4) {
85 + t6 = t4 === undefined ? [] : t4;
86 + $[5] = t4;
87 + $[6] = t6;
88 + } else {
89 + t6 = $[6];
90 + }
91 + const urls = t6;
92 + let t7;
93 + if ($[7] !== comments.length) {
94 + t7 = (e) => {
95 if (!comments.length) {
96 return;
97 }
98
99 console.log(comments.length);
100 };
103 - $[9] = comments.length;
104 - $[10] = t6;
101 + $[7] = comments.length;
102 + $[8] = t7;
103 } else {
106 - t6 = $[10];
104 + t7 = $[8];
105 }
108 - onClick = t6;
106 + const onClick = t7;
107
108 allUrls.push(...urls);
111 - $[1] = post;
112 - $[2] = media;
113 - $[3] = allUrls;
114 - $[4] = onClick;
115 - } else {
116 - media = $[2];
117 - allUrls = $[3];
118 - onClick = $[4];
119 - }
120 - let t1;
121 - if ($[11] !== media || $[12] !== allUrls || $[13] !== onClick) {
109 t1 = <Stringify media={media} allUrls={allUrls} onClick={onClick} />;
123 - $[11] = media;
124 - $[12] = allUrls;
125 - $[13] = onClick;
126 - $[14] = t1;
110 + $[1] = post;
111 + $[2] = t1;
112 } else {
128 - t1 = $[14];
113 + t1 = $[2];
114 }
115 return t1;
116 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md
+11 -23
@@ -30,17 +30,15 @@ function Component(props) {
30 ```javascript
31 import { c as _c } from "react/compiler-runtime";
32 function Component(props) {
33 - const $ = _c(8);
33 + const $ = _c(4);
34 const post = useFragment(graphql`...`, props.post);
35 - let media;
36 - let onClick;
35 + let t0;
36 if ($[0] !== post) {
37 const allUrls = [];
38
40 - const { media: t0, comments, urls } = post;
41 - media = t0;
39 + const { media, comments, urls } = post;
40 let t1;
43 - if ($[3] !== comments.length) {
41 + if ($[2] !== comments.length) {
42 t1 = (e) => {
43 if (!comments.length) {
44 return;
@@ -48,29 +46,19 @@ function Component(props) {
46
47 console.log(comments.length);
48 };
51 - $[3] = comments.length;
52 - $[4] = t1;
49 + $[2] = comments.length;
50 + $[3] = t1;
51 } else {
54 - t1 = $[4];
52 + t1 = $[3];
53 }
56 - onClick = t1;
54 + const onClick = t1;
55
56 allUrls.push(...urls);
59 - $[0] = post;
60 - $[1] = media;
61 - $[2] = onClick;
62 - } else {
63 - media = $[1];
64 - onClick = $[2];
65 - }
66 - let t0;
67 - if ($[5] !== media || $[6] !== onClick) {
57 t0 = <Media media={media} onClick={onClick} />;
69 - $[5] = media;
70 - $[6] = onClick;
71 - $[7] = t0;
58 + $[0] = post;
59 + $[1] = t0;
60 } else {
73 - t0 = $[7];
61 + t0 = $[1];
62 }
63 return t0;
64 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md
+7 -15
@@ -33,34 +33,26 @@ import { c as _c } from "react/compiler-runtime";
33 import { Stringify } from "shared-runtime";
34
35 function hoisting() {
36 - const $ = _c(3);
37 - let onClick;
38 - let onClick2;
36 + const $ = _c(1);
37 + let t0;
38 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
40 - onClick = function onClick() {
39 + const onClick = function onClick() {
40 return bar.baz;
41 };
42
44 - onClick2 = function onClick2() {
43 + const onClick2 = function onClick2() {
44 return bar[baz];
45 };
46
47 const baz = "baz";
48 const bar = { baz: 1 };
50 - $[0] = onClick;
51 - $[1] = onClick2;
52 - } else {
53 - onClick = $[0];
54 - onClick2 = $[1];
55 - }
56 - let t0;
57 - if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
49 +
50 t0 = (
51 <Stringify onClick={onClick} onClick2={onClick2} shouldInvokeFns={true} />
52 );
61 - $[2] = t0;
53 + $[0] = t0;
54 } else {
63 - t0 = $[2];
55 + t0 = $[0];
56 }
57 return t0;
58 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md
+6 -11
@@ -28,24 +28,19 @@ import { c as _c } from "react/compiler-runtime";
28 import { Stringify } from "shared-runtime";
29
30 function hoisting() {
31 - const $ = _c(2);
32 - let onClick;
31 + const $ = _c(1);
32 + let t0;
33 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
34 - onClick = function onClick(x) {
34 + const onClick = function onClick(x) {
35 return x + bar.baz;
36 };
37
38 const bar = { baz: 1 };
39 - $[0] = onClick;
40 - } else {
41 - onClick = $[0];
42 - }
43 - let t0;
44 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
39 +
40 t0 = <Stringify onClick={onClick} />;
46 - $[1] = t0;
41 + $[0] = t0;
42 } else {
48 - t0 = $[1];
43 + t0 = $[0];
44 }
45 return t0;
46 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md
+6 -13
@@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures()
36
37 export default Renderer = isForgetEnabled_Fixtures()
38 ? (props) => {
39 - const $ = _c(2);
39 + const $ = _c(1);
40 let t0;
41 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
42 - t0 = <Bar />;
43 - $[0] = t0;
44 - } else {
45 - t0 = $[0];
46 - }
47 - let t1;
48 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
49 - t1 = (
42 + t0 = (
43 <Foo>
51 - {t0}
44 + <Bar />
45 <ErrorView />
46 </Foo>
47 );
55 - $[1] = t1;
48 + $[0] = t0;
49 } else {
57 - t1 = $[1];
50 + t0 = $[0];
51 }
59 - return t1;
52 + return t0;
53 }
54 : (props) => (
55 <Foo>
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md
+6 -13
@@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures()
36
37 export const Renderer = isForgetEnabled_Fixtures()
38 ? (props) => {
39 - const $ = _c(2);
39 + const $ = _c(1);
40 let t0;
41 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
42 - t0 = <Bar />;
43 - $[0] = t0;
44 - } else {
45 - t0 = $[0];
46 - }
47 - let t1;
48 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
49 - t1 = (
42 + t0 = (
43 <Foo>
51 - {t0}
44 + <Bar />
45 <ErrorView />
46 </Foo>
47 );
55 - $[1] = t1;
48 + $[0] = t0;
49 } else {
57 - t1 = $[1];
50 + t0 = $[0];
51 }
59 - return t1;
52 + return t0;
53 }
54 : (props) => (
55 <Foo>
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md
+6 -13
@@ -38,27 +38,20 @@ const ErrorView = isForgetEnabled_Fixtures()
38
39 const Renderer = isForgetEnabled_Fixtures()
40 ? (props) => {
41 - const $ = _c(2);
41 + const $ = _c(1);
42 let t0;
43 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
44 - t0 = <Bar />;
45 - $[0] = t0;
46 - } else {
47 - t0 = $[0];
48 - }
49 - let t1;
50 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
51 - t1 = (
44 + t0 = (
45 <Foo>
53 - {t0}
46 + <Bar />
47 <ErrorView />
48 </Foo>
49 );
57 - $[1] = t1;
50 + $[0] = t0;
51 } else {
59 - t1 = $[1];
52 + t0 = $[0];
53 }
61 - return t1;
54 + return t0;
55 }
56 : (props) => (
57 <Foo>
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md
+7 -18
@@ -18,30 +18,19 @@ function Component(props) {
18 ```javascript
19 import { c as _c } from "react/compiler-runtime";
20 function Component(props) {
21 - const $ = _c(6);
22 - let x;
23 - let child;
21 + const $ = _c(2);
22 + let t0;
23 if ($[0] !== props.p0) {
25 - x = {};
24 + const x = {};
25 const y = [];
26 x.y = y;
28 - child = <Component data={y} />;
27 + const child = <Component data={y} />;
28 x.y.push(props.p0);
30 - $[0] = props.p0;
31 - $[1] = x;
32 - $[2] = child;
33 - } else {
34 - x = $[1];
35 - child = $[2];
36 - }
37 - let t0;
38 - if ($[3] !== x || $[4] !== child) {
29 t0 = <Component data={x}>{child}</Component>;
40 - $[3] = x;
41 - $[4] = child;
42 - $[5] = t0;
30 + $[0] = props.p0;
31 + $[1] = t0;
32 } else {
44 - t0 = $[5];
33 + t0 = $[1];
34 }
35 return t0;
36 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md
+14 -24
@@ -23,42 +23,32 @@ function Component(props) {
23 ```javascript
24 import { c as _c } from "react/compiler-runtime";
25 function Component(props) {
26 - const $ = _c(9);
27 - let x;
28 - let y;
26 + const $ = _c(5);
27 + let t0;
28 if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
30 - x = [];
29 + let x = [];
30 x.push(props.p0);
32 - y = x;
31 + const y = x;
32 if (props.p1) {
34 - let t0;
35 - if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
36 - t0 = [];
37 - $[5] = t0;
33 + let t1;
34 + if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
35 + t1 = [];
36 + $[4] = t1;
37 } else {
39 - t0 = $[5];
38 + t1 = $[4];
39 }
41 - x = t0;
40 + x = t1;
41 }
42
43 y.push(props.p2);
44 +
45 + t0 = <Component x={x} y={y} />;
46 $[0] = props.p0;
47 $[1] = props.p1;
48 $[2] = props.p2;
48 - $[3] = x;
49 - $[4] = y;
50 - } else {
51 - x = $[3];
52 - y = $[4];
53 - }
54 - let t0;
55 - if ($[6] !== x || $[7] !== y) {
56 - t0 = <Component x={x} y={y} />;
57 - $[6] = x;
58 - $[7] = y;
59 - $[8] = t0;
49 + $[3] = t0;
50 } else {
61 - t0 = $[8];
51 + t0 = $[3];
52 }
53 return t0;
54 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md
+14 -24
@@ -22,39 +22,29 @@ function Component(props) {
22 ```javascript
23 import { c as _c } from "react/compiler-runtime";
24 function Component(props) {
25 - const $ = _c(8);
26 - let x;
27 - let y;
25 + const $ = _c(4);
26 + let t0;
27 if ($[0] !== props.p0 || $[1] !== props.p1) {
29 - x = [];
28 + let x = [];
29 x.push(props.p0);
31 - y = x;
32 - let t0;
33 - if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
34 - t0 = [];
35 - $[4] = t0;
30 + const y = x;
31 + let t1;
32 + if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
33 + t1 = [];
34 + $[3] = t1;
35 } else {
37 - t0 = $[4];
36 + t1 = $[3];
37 }
39 - x = t0;
38 + x = t1;
39
40 y.push(props.p1);
41 +
42 + t0 = <Component x={x} y={y} />;
43 $[0] = props.p0;
44 $[1] = props.p1;
44 - $[2] = x;
45 - $[3] = y;
46 - } else {
47 - x = $[2];
48 - y = $[3];
49 - }
50 - let t0;
51 - if ($[5] !== x || $[6] !== y) {
52 - t0 = <Component x={x} y={y} />;
53 - $[5] = x;
54 - $[6] = y;
55 - $[7] = t0;
45 + $[2] = t0;
46 } else {
57 - t0 = $[7];
47 + t0 = $[2];
48 }
49 return t0;
50 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md
+8 -18
@@ -24,13 +24,12 @@ function Component(props) {
24 ```javascript
25 import { c as _c } from "react/compiler-runtime";
26 function Component(props) {
27 - const $ = _c(6);
27 + const $ = _c(2);
28 const item = props.item;
29 - let baseVideos;
30 - let thumbnails;
29 + let t0;
30 if ($[0] !== item) {
32 - thumbnails = [];
33 - baseVideos = getBaseVideos(item);
31 + const thumbnails = [];
32 + const baseVideos = getBaseVideos(item);
33
34 baseVideos.forEach((video) => {
35 const baseVideo = video.hasBaseVideo;
@@ -38,21 +37,12 @@ function Component(props) {
37 thumbnails.push({ extraVideo: true });
38 }
39 });
41 - $[0] = item;
42 - $[1] = baseVideos;
43 - $[2] = thumbnails;
44 - } else {
45 - baseVideos = $[1];
46 - thumbnails = $[2];
47 - }
48 - let t0;
49 - if ($[3] !== baseVideos || $[4] !== thumbnails) {
40 +
41 t0 = <FlatList baseVideos={baseVideos} items={thumbnails} />;
51 - $[3] = baseVideos;
52 - $[4] = thumbnails;
53 - $[5] = t0;
42 + $[0] = item;
43 + $[1] = t0;
44 } else {
55 - t0 = $[5];
45 + t0 = $[1];
46 }
47 return t0;
48 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md
+8 -17
@@ -24,35 +24,26 @@ function Component(props) {
24 ```javascript
25 import { c as _c } from "react/compiler-runtime";
26 function Component(props) {
27 - const $ = _c(6);
28 - let x;
29 - let y;
27 + const $ = _c(2);
28 + let t0;
29 if ($[0] !== props) {
31 - x = [];
30 + const x = [];
31 + let y;
32 if (props.p0) {
33 x.push(props.p1);
34 y = x;
35 }
36 - $[0] = props;
37 - $[1] = x;
38 - $[2] = y;
39 - } else {
40 - x = $[1];
41 - y = $[2];
42 - }
43 - let t0;
44 - if ($[3] !== x || $[4] !== y) {
36 +
37 t0 = (
38 <Component>
39 {x}
40 {y}
41 </Component>
42 );
51 - $[3] = x;
52 - $[4] = y;
53 - $[5] = t0;
43 + $[0] = props;
44 + $[1] = t0;
45 } else {
55 - t0 = $[5];
46 + t0 = $[1];
47 }
48 return t0;
49 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md
+19 -25
@@ -33,25 +33,25 @@ function Component(props) {
33 ```javascript
34 import { c as _c } from "react/compiler-runtime";
35 function Component(props) {
36 - const $ = _c(9);
37 - let x;
36 + const $ = _c(7);
37 let y;
38 + let t0;
39 if ($[0] !== props) {
40 - x = [];
40 + const x = [];
41 bb0: switch (props.p0) {
42 case 1: {
43 break bb0;
44 }
45 case true: {
46 x.push(props.p2);
47 - let t0;
47 + let t1;
48 if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
49 - t0 = [];
50 - $[3] = t0;
49 + t1 = [];
50 + $[3] = t1;
51 } else {
52 - t0 = $[3];
52 + t1 = $[3];
53 }
54 - y = t0;
54 + y = t1;
55 }
56 default: {
57 break bb0;
@@ -60,31 +60,25 @@ function Component(props) {
60 y = x;
61 }
62 }
63 - $[0] = props;
64 - $[1] = x;
65 - $[2] = y;
66 - } else {
67 - x = $[1];
68 - y = $[2];
69 - }
70 - let t0;
71 - if ($[4] !== x) {
63 +
64 t0 = <Component data={x} />;
73 - $[4] = x;
74 - $[5] = t0;
65 + $[0] = props;
66 + $[1] = y;
67 + $[2] = t0;
68 } else {
76 - t0 = $[5];
69 + y = $[1];
70 + t0 = $[2];
71 }
72 const child = t0;
73 y.push(props.p4);
74 let t1;
81 - if ($[6] !== y || $[7] !== child) {
75 + if ($[4] !== y || $[5] !== child) {
76 t1 = <Component data={y}>{child}</Component>;
83 - $[6] = y;
84 - $[7] = child;
85 - $[8] = t1;
77 + $[4] = y;
78 + $[5] = child;
79 + $[6] = t1;
80 } else {
87 - t1 = $[8];
81 + t1 = $[6];
82 }
83 return t1;
84 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md
+14 -20
@@ -28,11 +28,11 @@ function Component(props) {
28 ```javascript
29 import { c as _c } from "react/compiler-runtime";
30 function Component(props) {
31 - const $ = _c(8);
32 - let x;
31 + const $ = _c(6);
32 let y;
33 + let t0;
34 if ($[0] !== props) {
35 - x = [];
35 + const x = [];
36 switch (props.p0) {
37 case true: {
38 x.push(props.p2);
@@ -42,31 +42,25 @@ function Component(props) {
42 y = x;
43 }
44 }
45 - $[0] = props;
46 - $[1] = x;
47 - $[2] = y;
48 - } else {
49 - x = $[1];
50 - y = $[2];
51 - }
52 - let t0;
53 - if ($[3] !== x) {
45 +
46 t0 = <Component data={x} />;
55 - $[3] = x;
56 - $[4] = t0;
47 + $[0] = props;
48 + $[1] = y;
49 + $[2] = t0;
50 } else {
58 - t0 = $[4];
51 + y = $[1];
52 + t0 = $[2];
53 }
54 const child = t0;
55 y.push(props.p4);
56 let t1;
63 - if ($[5] !== y || $[6] !== child) {
57 + if ($[3] !== y || $[4] !== child) {
58 t1 = <Component data={y}>{child}</Component>;
65 - $[5] = y;
66 - $[6] = child;
67 - $[7] = t1;
59 + $[3] = y;
60 + $[4] = child;
61 + $[5] = t1;
62 } else {
69 - t1 = $[7];
63 + t1 = $[5];
64 }
65 return t1;
66 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md
+6 -13
@@ -24,10 +24,10 @@ function Component(props) {
24 ```javascript
25 import { c as _c } from "react/compiler-runtime";
26 function Component(props) {
27 - const $ = _c(4);
28 - let x;
27 + const $ = _c(2);
28 + let t0;
29 if ($[0] !== props.cond) {
30 - x = {};
30 + const x = {};
31
32 const onChange = (e) => {
33 maybeMutate(x, e.target.value);
@@ -36,18 +36,11 @@ function Component(props) {
36 }
37
38 onChange();
39 - $[0] = props.cond;
40 - $[1] = x;
41 - } else {
42 - x = $[1];
43 - }
44 - let t0;
45 - if ($[2] !== x) {
39 t0 = <Foo value={x} />;
47 - $[2] = x;
48 - $[3] = t0;
40 + $[0] = props.cond;
41 + $[1] = t0;
42 } else {
50 - t0 = $[3];
43 + t0 = $[1];
44 }
45 return t0;
46 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md
+3 -10
@@ -21,22 +21,15 @@ function component() {
21 ```javascript
22 import { c as _c } from "react/compiler-runtime";
23 function component() {
24 - const $ = _c(2);
24 + const $ = _c(1);
25 let t0;
26 if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
27 - t0 = makeSomePrimitive();
27 + t0 = { u: makeSomePrimitive(), v: makeSomePrimitive() };
28 $[0] = t0;
29 } else {
30 t0 = $[0];
31 }
32 - let t1;
33 - if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
34 - t1 = { u: t0, v: makeSomePrimitive() };
35 - $[1] = t1;
36 - } else {
37 - t1 = $[1];
38 - }
39 - const x = t1;
32 + const x = t0;
33 const u = x.u;
34 const v = x.v;
35 if (u > v) {