[compiler] Fixture to show ref-in-render enforcement issue with useCallback
Test Plan: Documents that useCallback calls interfere with it being ok for refs to escape as part of functions into jsx ghstack-source-id: a5df427981ca32406fb2325e583b64bbe26b1cdd Pull Request resolved: https://github.com/facebook/react/pull/30714
Mike Vitousek committed
Aug 16, 2024 at 13:27 UTC
7468ac530e73992f28169ac69e18395a75edfc47
4 files changed
+110
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
new
+37
@@ -0,0 +1,37 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
6
+
7
+component Foo() {
8
+ const ref = useRef();
9
+
10
+ const s = () => {
11
+ return ref.current;
12
+ };
13
+
14
+ return s;
15
+}
16
+
17
+export const FIXTURE_ENTRYPOINT = {
18
+ fn: Foo,
19
+ params: [],
20
+};
21
+
22
+```
23
+
24
+
25
+## Error
26
+
27
+```
28
+ 8 | };
29
+ 9 |
30
+> 10 | return s;
31
+ | ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $25:TObject<BuiltInFunction> (10:10)
32
+ 11 | }
33
+ 12 |
34
+ 13 | export const FIXTURE_ENTRYPOINT = {
35
+```
36
+
37
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js
new
+16
@@ -0,0 +1,16 @@
1
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
2
+
3
+component Foo() {
4
+ const ref = useRef();
5
+
6
+ const s = () => {
7
+ return ref.current;
8
+ };
9
+
10
+ return s;
11
+}
12
+
13
+export const FIXTURE_ENTRYPOINT = {
14
+ fn: Foo,
15
+ params: [],
16
+};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
new
+41
@@ -0,0 +1,41 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
6
+
7
+component Foo() {
8
+ const ref = useRef();
9
+
10
+ const s = useCallback(() => {
11
+ return ref.current;
12
+ });
13
+
14
+ return <a r={s} />;
15
+}
16
+
17
+export const FIXTURE_ENTRYPOINT = {
18
+ fn: Foo,
19
+ params: [],
20
+};
21
+
22
+```
23
+
24
+
25
+## Error
26
+
27
+```
28
+ 4 | const ref = useRef();
29
+ 5 |
30
+> 6 | const s = useCallback(() => {
31
+ | ^^^^^^^
32
+> 7 | return ref.current;
33
+ | ^^^^^^^^^^^^^^^^^^^^^^^
34
+> 8 | });
35
+ | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $27:TObject<BuiltInFunction> (6:8)
36
+ 9 |
37
+ 10 | return <a r={s} />;
38
+ 11 | }
39
+```
40
+
41
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js
new
+16
@@ -0,0 +1,16 @@
1
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
2
+
3
+component Foo() {
4
+ const ref = useRef();
5
+
6
+ const s = useCallback(() => {
7
+ return ref.current;
8
+ });
9
+
10
+ return <a r={s} />;
11
+}
12
+
13
+export const FIXTURE_ENTRYPOINT = {
14
+ fn: Foo,
15
+ params: [],
16
+};