[compiler] Fixture to demonstrate issue with returning object containing ref
Summary: We currently can return a ref from a hook but not an object containing a ref. ghstack-source-id: 8b1de4991eb2731b7f758e685ba62d9f07d584b2 Pull Request resolved: https://github.com/facebook/react/pull/30820
Mike Vitousek committed
Aug 27, 2024 at 10:11 UTC
f2841c2a490b4b776b98568871b69693fedf985c
2 files changed
+65
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback-structure.expect.md
new
+45
@@ -0,0 +1,45 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
6
+
7
+import {useRef} from 'react';
8
+
9
+component Foo(cond: boolean, cond2: boolean) {
10
+ const ref = useRef();
11
+
12
+ const s = () => {
13
+ return ref.current;
14
+ };
15
+
16
+ if (cond) return [s];
17
+ else if (cond2) return {s};
18
+ else return {s: [s]};
19
+}
20
+
21
+export const FIXTURE_ENTRYPOINT = {
22
+ fn: Foo,
23
+ params: [{cond: false, cond2: false}],
24
+};
25
+
26
+```
27
+
28
+
29
+## Error
30
+
31
+```
32
+ 10 | };
33
+ 11 |
34
+> 12 | if (cond) return [s];
35
+ | ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
36
+
37
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
38
+
39
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
40
+ 13 | else if (cond2) return {s};
41
+ 14 | else return {s: [s]};
42
+ 15 | }
43
+```
44
+
45
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback-structure.js
new
+20
@@ -0,0 +1,20 @@
1
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
2
+
3
+import {useRef} from 'react';
4
+
5
+component Foo(cond: boolean, cond2: boolean) {
6
+ const ref = useRef();
7
+
8
+ const s = () => {
9
+ return ref.current;
10
+ };
11
+
12
+ if (cond) return [s];
13
+ else if (cond2) return {s};
14
+ else return {s: [s]};
15
+}
16
+
17
+export const FIXTURE_ENTRYPOINT = {
18
+ fn: Foo,
19
+ params: [{cond: false, cond2: false}],
20
+};