[compiler] Ref validation repro for ImportSpecifier with renamed local (#31383)
This was originally reported in https://github.com/reactwg/react-compiler/discussions/27. Adding a failing repro to capture this case. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/31383). * #31385 * #31384 * __->__ #31383
lauren committed
Oct 29, 2024 at 21:36 UTC
3928cb00db94e31afd3efa6850f0e8bec53aefc1
2 files changed
+113
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.expect.md
new
+71
@@ -0,0 +1,71 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import {
6
+ useEffect,
7
+ useRef,
8
+ // @ts-expect-error
9
+ experimental_useEffectEvent as useEffectEvent,
10
+} from 'react';
11
+
12
+let id = 0;
13
+function uniqueId() {
14
+ 'use no memo';
15
+ return id++;
16
+}
17
+
18
+export function useCustomHook(src: string): void {
19
+ const uidRef = useRef(uniqueId());
20
+ const destroyed = useRef(false);
21
+ const getItem = (srcName, uid) => {
22
+ return {srcName, uid};
23
+ };
24
+
25
+ const getItemEvent = useEffectEvent(() => {
26
+ if (destroyed.current) return;
27
+
28
+ getItem(src, uidRef.current);
29
+ });
30
+
31
+ useEffect(() => {
32
+ destroyed.current = false;
33
+ getItemEvent();
34
+ }, []);
35
+}
36
+
37
+function Component() {
38
+ useCustomHook('hello');
39
+ return <div>Hello</div>;
40
+}
41
+
42
+export const FIXTURE_ENTRYPOINT = {
43
+ fn: Component,
44
+ isComponent: true,
45
+ params: [{x: 1}],
46
+};
47
+
48
+```
49
+
50
+
51
+## Error
52
+
53
+```
54
+ 19 | };
55
+ 20 |
56
+> 21 | const getItemEvent = useEffectEvent(() => {
57
+ | ^^^^^^^
58
+> 22 | if (destroyed.current) return;
59
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60
+> 23 |
61
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
62
+> 24 | getItem(src, uidRef.current);
63
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
64
+> 25 | });
65
+ | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (21:25)
66
+ 26 |
67
+ 27 | useEffect(() => {
68
+ 28 | destroyed.current = false;
69
+```
70
+
71
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.tsx
new
+42
@@ -0,0 +1,42 @@
1
+import {
2
+ useEffect,
3
+ useRef,
4
+ // @ts-expect-error
5
+ experimental_useEffectEvent as useEffectEvent,
6
+} from 'react';
7
+
8
+let id = 0;
9
+function uniqueId() {
10
+ 'use no memo';
11
+ return id++;
12
+}
13
+
14
+export function useCustomHook(src: string): void {
15
+ const uidRef = useRef(uniqueId());
16
+ const destroyed = useRef(false);
17
+ const getItem = (srcName, uid) => {
18
+ return {srcName, uid};
19
+ };
20
+
21
+ const getItemEvent = useEffectEvent(() => {
22
+ if (destroyed.current) return;
23
+
24
+ getItem(src, uidRef.current);
25
+ });
26
+
27
+ useEffect(() => {
28
+ destroyed.current = false;
29
+ getItemEvent();
30
+ }, []);
31
+}
32
+
33
+function Component() {
34
+ useCustomHook('hello');
35
+ return <div>Hello</div>;
36
+}
37
+
38
+export const FIXTURE_ENTRYPOINT = {
39
+ fn: Component,
40
+ isComponent: true,
41
+ params: [{x: 1}],
42
+};