Extra fixture for validating preserved memoization of non-escaping callbacks
Joe Savona committed
Jan 12, 2024 at 14:32 UTC
653373141a36a120a1c09391e0e6d3d81be5750c
2 files changed
+137
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/repro-false-positive-preserve-memoization-nonescaping-invoked-callback-escaping-return.expect.md
new
+109
@@ -0,0 +1,109 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
6
+import { useCallback } from "react";
7
+
8
+function Component({ entity, children }) {
9
+ const showMessage = useCallback(() => entity != null);
10
+
11
+ // We currently model functions as if they could escape intor their return value
12
+ // but if we ever changed that (or did optimization to figure out cases where they
13
+ // are known not to) we could get a false positive validation error here, since
14
+ // showMessage doesn't need to be memoized since it doesn't escape in this instance.
15
+ const shouldShowMessage = showMessage();
16
+ return (
17
+ <div>
18
+ <div>{shouldShowMessage}</div>
19
+ <div>{children}</div>
20
+ </div>
21
+ );
22
+}
23
+
24
+export const FIXTURE_ENTRYPOINT = {
25
+ fn: Component,
26
+ params: [
27
+ {
28
+ entity: { name: "Sathya" },
29
+ children: [<div key="gsathya">Hi Sathya!</div>],
30
+ },
31
+ ],
32
+};
33
+
34
+```
35
+
36
+## Code
37
+
38
+```javascript
39
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
40
+import { useCallback, unstable_useMemoCache as useMemoCache } from "react";
41
+
42
+function Component(t26) {
43
+ const $ = useMemoCache(11);
44
+ const { entity, children } = t26;
45
+ let t0;
46
+ if ($[0] !== entity) {
47
+ t0 = () => entity != null;
48
+ $[0] = entity;
49
+ $[1] = t0;
50
+ } else {
51
+ t0 = $[1];
52
+ }
53
+ const showMessage = t0;
54
+ let t1;
55
+ if ($[2] !== showMessage) {
56
+ t1 = showMessage();
57
+ $[2] = showMessage;
58
+ $[3] = t1;
59
+ } else {
60
+ t1 = $[3];
61
+ }
62
+ const shouldShowMessage = t1;
63
+ let t2;
64
+ if ($[4] !== shouldShowMessage) {
65
+ t2 = <div>{shouldShowMessage}</div>;
66
+ $[4] = shouldShowMessage;
67
+ $[5] = t2;
68
+ } else {
69
+ t2 = $[5];
70
+ }
71
+ let t3;
72
+ if ($[6] !== children) {
73
+ t3 = <div>{children}</div>;
74
+ $[6] = children;
75
+ $[7] = t3;
76
+ } else {
77
+ t3 = $[7];
78
+ }
79
+ let t4;
80
+ if ($[8] !== t2 || $[9] !== t3) {
81
+ t4 = (
82
+ <div>
83
+ {t2}
84
+ {t3}
85
+ </div>
86
+ );
87
+ $[8] = t2;
88
+ $[9] = t3;
89
+ $[10] = t4;
90
+ } else {
91
+ t4 = $[10];
92
+ }
93
+ return t4;
94
+}
95
+
96
+export const FIXTURE_ENTRYPOINT = {
97
+ fn: Component,
98
+ params: [
99
+ {
100
+ entity: { name: "Sathya" },
101
+ children: [<div key="gsathya">Hi Sathya!</div>],
102
+ },
103
+ ],
104
+};
105
+
106
+```
107
+
108
+### Eval output
109
+(kind: ok) <div><div></div><div><div>Hi Sathya!</div></div></div>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/repro-false-positive-preserve-memoization-nonescaping-invoked-callback-escaping-return.js
new
+28
@@ -0,0 +1,28 @@
1
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
2
+import { useCallback } from "react";
3
+
4
+function Component({ entity, children }) {
5
+ const showMessage = useCallback(() => entity != null);
6
+
7
+ // We currently model functions as if they could escape intor their return value
8
+ // but if we ever changed that (or did optimization to figure out cases where they
9
+ // are known not to) we could get a false positive validation error here, since
10
+ // showMessage doesn't need to be memoized since it doesn't escape in this instance.
11
+ const shouldShowMessage = showMessage();
12
+ return (
13
+ <div>
14
+ <div>{shouldShowMessage}</div>
15
+ <div>{children}</div>
16
+ </div>
17
+ );
18
+}
19
+
20
+export const FIXTURE_ENTRYPOINT = {
21
+ fn: Component,
22
+ params: [
23
+ {
24
+ entity: { name: "Sathya" },
25
+ children: [<div key="gsathya">Hi Sathya!</div>],
26
+ },
27
+ ],
28
+};