Skip to content

Commit

Permalink
[compiler] Ref validation repro for ImportSpecifier with renamed local
Browse files Browse the repository at this point in the history
This was originally reported in reactwg/react-compiler#27.

Adding a failing repro to capture this case.
  • Loading branch information
poteto committed Oct 29, 2024
1 parent 0bc3074 commit afc5d46
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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;
```
Original file line number Diff line number Diff line change
@@ -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}],
};

0 comments on commit afc5d46

Please sign in to comment.