mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[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:
+71
@@ -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;
|
||||
```
|
||||
|
||||
|
||||
+42
@@ -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}],
|
||||
};
|
||||
Reference in New Issue
Block a user