[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
This commit is contained in:
lauren
2024-10-29 21:36:36 -04:00
committed by GitHub
parent 0bc3074873
commit 3928cb00db
2 changed files with 113 additions and 0 deletions
@@ -0,0 +1,71 @@
## Input
```javascript
import {
useEffect,
useRef,
// @ts-expect-error
experimental_useEffectEvent as useEffectEvent,
} from 'react';
let id = 0;
function uniqueId() {
'use no memo';
return id++;
}
export function useCustomHook(src: string): void {
const uidRef = useRef(uniqueId());
const destroyed = useRef(false);
const getItem = (srcName, uid) => {
return {srcName, uid};
};
const getItemEvent = useEffectEvent(() => {
if (destroyed.current) return;
getItem(src, uidRef.current);
});
useEffect(() => {
destroyed.current = false;
getItemEvent();
}, []);
}
function Component() {
useCustomHook('hello');
return <div>Hello</div>;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
isComponent: true,
params: [{x: 1}],
};
```
## Error
```
19 | };
20 |
> 21 | const getItemEvent = useEffectEvent(() => {
| ^^^^^^^
> 22 | if (destroyed.current) return;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 23 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 24 | getItem(src, uidRef.current);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 25 | });
| ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (21:25)
26 |
27 | useEffect(() => {
28 | destroyed.current = false;
```
@@ -0,0 +1,42 @@
import {
useEffect,
useRef,
// @ts-expect-error
experimental_useEffectEvent as useEffectEvent,
} from 'react';
let id = 0;
function uniqueId() {
'use no memo';
return id++;
}
export function useCustomHook(src: string): void {
const uidRef = useRef(uniqueId());
const destroyed = useRef(false);
const getItem = (srcName, uid) => {
return {srcName, uid};
};
const getItemEvent = useEffectEvent(() => {
if (destroyed.current) return;
getItem(src, uidRef.current);
});
useEffect(() => {
destroyed.current = false;
getItemEvent();
}, []);
}
function Component() {
useCustomHook('hello');
return <div>Hello</div>;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
isComponent: true,
params: [{x: 1}],
};