More fixtures for useCallback with refs
Extra fixture confirming that some usage of refs can break memoization, both in normal mode and in preserve-existing-memo mode.
Joe Savona committed
Dec 15, 2023 at 16:22 UTC
0b32173d0995ad581513ff5d226b010fd117395c
4 files changed
+183
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
new
+67
@@ -0,0 +1,67 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @enablePreserveExistingMemoizationGuarantees:false
6
+import { useCallback, useRef } from "react";
7
+
8
+function Component(props) {
9
+ const ref = useRef({ inner: null });
10
+
11
+ const onChange = useCallback((event) => {
12
+ // The ref should still be mutable here even though function deps are frozen in
13
+ // @enablePreserveExistingMemoizationGuarantees mode
14
+ ref.current.inner = event.target.value;
15
+ });
16
+
17
+ ref.current.inner = null;
18
+
19
+ return <input onChange={onChange} />;
20
+}
21
+
22
+export const FIXTURE_ENTRYPOINT = {
23
+ fn: Component,
24
+ params: [{}],
25
+};
26
+
27
+```
28
+
29
+## Code
30
+
31
+```javascript
32
+// @enablePreserveExistingMemoizationGuarantees:false
33
+import {
34
+ useCallback,
35
+ useRef,
36
+ unstable_useMemoCache as useMemoCache,
37
+} from "react";
38
+
39
+function Component(props) {
40
+ const $ = useMemoCache(2);
41
+ const ref = useRef({ inner: null });
42
+
43
+ const onChange = (event) => {
44
+ ref.current.inner = event.target.value;
45
+ };
46
+
47
+ ref.current.inner = null;
48
+ let t0;
49
+ if ($[0] !== onChange) {
50
+ t0 = <input onChange={onChange} />;
51
+ $[0] = onChange;
52
+ $[1] = t0;
53
+ } else {
54
+ t0 = $[1];
55
+ }
56
+ return t0;
57
+}
58
+
59
+export const FIXTURE_ENTRYPOINT = {
60
+ fn: Component,
61
+ params: [{}],
62
+};
63
+
64
+```
65
+
66
+### Eval output
67
+(kind: ok) <input>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.js
new
+21
@@ -0,0 +1,21 @@
1
+// @enablePreserveExistingMemoizationGuarantees:false
2
+import { useCallback, useRef } from "react";
3
+
4
+function Component(props) {
5
+ const ref = useRef({ inner: null });
6
+
7
+ const onChange = useCallback((event) => {
8
+ // The ref should still be mutable here even though function deps are frozen in
9
+ // @enablePreserveExistingMemoizationGuarantees mode
10
+ ref.current.inner = event.target.value;
11
+ });
12
+
13
+ ref.current.inner = null;
14
+
15
+ return <input onChange={onChange} />;
16
+}
17
+
18
+export const FIXTURE_ENTRYPOINT = {
19
+ fn: Component,
20
+ params: [{}],
21
+};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md
new
+74
@@ -0,0 +1,74 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @enablePreserveExistingMemoizationGuarantees
6
+import { useCallback, useRef } from "react";
7
+
8
+function Component(props) {
9
+ const ref = useRef({ inner: null });
10
+
11
+ const onChange = useCallback((event) => {
12
+ // The ref should still be mutable here even though function deps are frozen in
13
+ // @enablePreserveExistingMemoizationGuarantees mode
14
+ ref.current.inner = event.target.value;
15
+ });
16
+
17
+ ref.current.inner = null;
18
+
19
+ return <input onChange={onChange} />;
20
+}
21
+
22
+export const FIXTURE_ENTRYPOINT = {
23
+ fn: Component,
24
+ params: [{}],
25
+};
26
+
27
+```
28
+
29
+## Code
30
+
31
+```javascript
32
+// @enablePreserveExistingMemoizationGuarantees
33
+import {
34
+ useCallback,
35
+ useRef,
36
+ unstable_useMemoCache as useMemoCache,
37
+} from "react";
38
+
39
+function Component(props) {
40
+ const $ = useMemoCache(3);
41
+ let t0;
42
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
43
+ t0 = { inner: null };
44
+ $[0] = t0;
45
+ } else {
46
+ t0 = $[0];
47
+ }
48
+ const ref = useRef(t0);
49
+
50
+ const onChange = (event) => {
51
+ ref.current.inner = event.target.value;
52
+ };
53
+
54
+ ref.current.inner = null;
55
+ let t1;
56
+ if ($[1] !== onChange) {
57
+ t1 = <input onChange={onChange} />;
58
+ $[1] = onChange;
59
+ $[2] = t1;
60
+ } else {
61
+ t1 = $[2];
62
+ }
63
+ return t1;
64
+}
65
+
66
+export const FIXTURE_ENTRYPOINT = {
67
+ fn: Component,
68
+ params: [{}],
69
+};
70
+
71
+```
72
+
73
+### Eval output
74
+(kind: ok) <input>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.js
new
+21
@@ -0,0 +1,21 @@
1
+// @enablePreserveExistingMemoizationGuarantees
2
+import { useCallback, useRef } from "react";
3
+
4
+function Component(props) {
5
+ const ref = useRef({ inner: null });
6
+
7
+ const onChange = useCallback((event) => {
8
+ // The ref should still be mutable here even though function deps are frozen in
9
+ // @enablePreserveExistingMemoizationGuarantees mode
10
+ ref.current.inner = event.target.value;
11
+ });
12
+
13
+ ref.current.inner = null;
14
+
15
+ return <input onChange={onChange} />;
16
+}
17
+
18
+export const FIXTURE_ENTRYPOINT = {
19
+ fn: Component,
20
+ params: [{}],
21
+};