compiler: repro for unmerged scopes due to intermediates
Repro of a case where we should ideally merge consecutive scopes, but where intermediate temporaries prevent the scopes from merging. We'd need to reorder instructions in order to merge these. ghstack-source-id: 4f05672604eeb547fc6c26ef99db6572843ac646 Pull Request resolved: https://github.com/facebook/react/pull/29197
Joe Savona committed
May 23, 2024 at 01:09 UTC
5fe8c0b4ecd09cfd2c0e1422089e2c603d558ff8
2 files changed
+89
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md
new
+75
@@ -0,0 +1,75 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { useState } from "react";
6
+
7
+function Component() {
8
+ const [state, setState] = useState(0);
9
+ const onClick = () => {
10
+ setState((s) => s + 1);
11
+ };
12
+ return (
13
+ <>
14
+ <span>Count: {state}</span>
15
+ <button onClick={onClick}>Increment</button>
16
+ </>
17
+ );
18
+}
19
+
20
+```
21
+
22
+## Code
23
+
24
+```javascript
25
+import { c as _c } from "react/compiler-runtime";
26
+import { useState } from "react";
27
+
28
+function Component() {
29
+ const $ = _c(6);
30
+ const [state, setState] = useState(0);
31
+ let t0;
32
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
33
+ t0 = () => {
34
+ setState((s) => s + 1);
35
+ };
36
+ $[0] = t0;
37
+ } else {
38
+ t0 = $[0];
39
+ }
40
+ const onClick = t0;
41
+ let t1;
42
+ if ($[1] !== state) {
43
+ t1 = <span>Count: {state}</span>;
44
+ $[1] = state;
45
+ $[2] = t1;
46
+ } else {
47
+ t1 = $[2];
48
+ }
49
+ let t2;
50
+ if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
51
+ t2 = <button onClick={onClick}>Increment</button>;
52
+ $[3] = t2;
53
+ } else {
54
+ t2 = $[3];
55
+ }
56
+ let t3;
57
+ if ($[4] !== t1) {
58
+ t3 = (
59
+ <>
60
+ {t1}
61
+ {t2}
62
+ </>
63
+ );
64
+ $[4] = t1;
65
+ $[5] = t3;
66
+ } else {
67
+ t3 = $[5];
68
+ }
69
+ return t3;
70
+}
71
+
72
+```
73
+
74
+### Eval output
75
+(kind: exception) Fixture not implemented
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js
new
+14
@@ -0,0 +1,14 @@
1
+import { useState } from "react";
2
+
3
+function Component() {
4
+ const [state, setState] = useState(0);
5
+ const onClick = () => {
6
+ setState((s) => s + 1);
7
+ };
8
+ return (
9
+ <>
10
+ <span>Count: {state}</span>
11
+ <button onClick={onClick}>Increment</button>
12
+ </>
13
+ );
14
+}