Skip to content

Commit e8a6b43

Browse files
committed
[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: 7926357 Pull Request resolved: #29881
1 parent 55fdcf8 commit e8a6b43

27 files changed

+217
-411
lines changed

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,11 +186,15 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
186186
}
187187
case "instruction": {
188188
switch (instr.instruction.value.kind) {
189+
case "BinaryExpression":
189190
case "ComputedLoad":
190191
case "JSXText":
192+
case "LoadGlobal":
191193
case "LoadLocal":
192194
case "Primitive":
193-
case "PropertyLoad": {
195+
case "PropertyLoad":
196+
case "TemplateLiteral":
197+
case "UnaryExpression": {
194198
/*
195199
* We can merge two scopes if there are intervening instructions, but:
196200
* - 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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,19 +67,16 @@ function Component() {
6767
}
6868
useEffect(t1, t2);
6969
let t3;
70+
let t4;
7071
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
7172
t3 = () => {
7273
setState(someGlobal.value);
7374
};
74-
$[3] = t3;
75-
} else {
76-
t3 = $[3];
77-
}
78-
let t4;
79-
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
8075
t4 = [someGlobal];
76+
$[3] = t3;
8177
$[4] = t4;
8278
} else {
79+
t3 = $[3];
8380
t4 = $[4];
8481
}
8582
useEffect(t3, t4);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,16 @@ function Component() {
6666
}
6767
useEffect(t1, t2);
6868
let t3;
69+
let t4;
6970
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
7071
t3 = () => {
7172
setState(someGlobal.value);
7273
};
73-
$[3] = t3;
74-
} else {
75-
t3 = $[3];
76-
}
77-
let t4;
78-
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
7974
t4 = [someGlobal];
75+
$[3] = t3;
8076
$[4] = t4;
8177
} else {
78+
t3 = $[3];
8279
t4 = $[4];
8380
}
8481
useEffect(t3, t4);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,16 @@ function Component() {
6666
}
6767
useEffect(t1, t2);
6868
let t3;
69+
let t4;
6970
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
7071
t3 = () => {
7172
setState(someGlobal);
7273
};
73-
$[3] = t3;
74-
} else {
75-
t3 = $[3];
76-
}
77-
let t4;
78-
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
7974
t4 = [someGlobal];
75+
$[3] = t3;
8076
$[4] = t4;
8177
} else {
78+
t3 = $[3];
8279
t4 = $[4];
8380
}
8481
useEffect(t3, t4);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,16 @@ function Component() {
5454
}
5555
useEffect(t0, t1);
5656
let t2;
57+
let t3;
5758
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
5859
t2 = () => {
5960
setState(someGlobal);
6061
};
61-
$[2] = t2;
62-
} else {
63-
t2 = $[2];
64-
}
65-
let t3;
66-
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
6762
t3 = [someGlobal];
63+
$[2] = t2;
6864
$[3] = t3;
6965
} else {
66+
t2 = $[2];
7067
t3 = $[3];
7168
}
7269
useEffect(t2, t3);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,16 @@ function Component() {
7070
}
7171
useEffect(t0, t1);
7272
let t2;
73+
let t3;
7374
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
7475
t2 = () => {
7576
setState(someGlobal.value);
7677
};
77-
$[2] = t2;
78-
} else {
79-
t2 = $[2];
80-
}
81-
let t3;
82-
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
8378
t3 = [someGlobal];
79+
$[2] = t2;
8480
$[3] = t3;
8581
} else {
82+
t2 = $[2];
8683
t3 = $[3];
8784
}
8885
useEffect(t2, t3);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,17 @@ function component() {
1515
```javascript
1616
import { c as _c } from "react/compiler-runtime";
1717
function component() {
18-
const $ = _c(2);
18+
const $ = _c(1);
1919
const [x, setX] = useState(0);
2020
let t0;
2121
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
22-
t0 = (v) => setX(v);
22+
const handler = (v) => setX(v);
23+
t0 = <Foo handler={handler} />;
2324
$[0] = t0;
2425
} else {
2526
t0 = $[0];
2627
}
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;
3629
}
3730

3831
```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md

Lines changed: 16 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -36,65 +36,45 @@ function mayMutate() {}
3636
```javascript
3737
import { c as _c } from "react/compiler-runtime";
3838
function ComponentA(props) {
39-
const $ = _c(6);
40-
let a;
41-
let b;
39+
const $ = _c(2);
40+
let t0;
4241
if ($[0] !== props) {
43-
a = [];
44-
b = [];
42+
const a = [];
43+
const b = [];
4544
if (b) {
4645
a.push(props.p0);
4746
}
4847
if (props.p1) {
4948
b.push(props.p2);
5049
}
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+
6051
t0 = <Foo a={a} b={b} />;
61-
$[3] = a;
62-
$[4] = b;
63-
$[5] = t0;
52+
$[0] = props;
53+
$[1] = t0;
6454
} else {
65-
t0 = $[5];
55+
t0 = $[1];
6656
}
6757
return t0;
6858
}
6959

7060
function ComponentB(props) {
71-
const $ = _c(6);
72-
let a;
73-
let b;
61+
const $ = _c(2);
62+
let t0;
7463
if ($[0] !== props) {
75-
a = [];
76-
b = [];
64+
const a = [];
65+
const b = [];
7766
if (mayMutate(b)) {
7867
a.push(props.p0);
7968
}
8069
if (props.p1) {
8170
b.push(props.p2);
8271
}
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+
9273
t0 = <Foo a={a} b={b} />;
93-
$[3] = a;
94-
$[4] = b;
95-
$[5] = t0;
74+
$[0] = props;
75+
$[1] = t0;
9676
} else {
97-
t0 = $[5];
77+
t0 = $[1];
9878
}
9979
return t0;
10080
}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,19 @@ function Component(props) {
1717
```javascript
1818
import { c as _c } from "react/compiler-runtime";
1919
function Component(props) {
20-
const $ = _c(2);
20+
const $ = _c(1);
2121
let t0;
2222
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
23-
t0 = () => {
23+
const onEvent = () => {
2424
console.log(42);
2525
};
26+
27+
t0 = <Foo onEvent={onEvent} />;
2628
$[0] = t0;
2729
} else {
2830
t0 = $[0];
2931
}
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;
3933
}
4034

4135
```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,20 @@ import { c as _c } from "react/compiler-runtime";
2727
import { Stringify } from "shared-runtime";
2828

2929
function Component(props) {
30-
const $ = _c(2);
31-
let callback;
30+
const $ = _c(1);
31+
let t0;
3232
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
3333
let x;
3434
x = null;
35-
callback = () => {
35+
const callback = () => {
3636
console.log(x);
3737
};
3838

3939
x = {};
40-
$[0] = callback;
41-
} else {
42-
callback = $[0];
43-
}
44-
let t0;
45-
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
4640
t0 = <Stringify callback={callback} shouldInvokeFns={true} />;
47-
$[1] = t0;
41+
$[0] = t0;
4842
} else {
49-
t0 = $[1];
43+
t0 = $[0];
5044
}
5145
return t0;
5246
}

0 commit comments

Comments
 (0)