[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: 8b1de4991e
Pull Request resolved: https://github.com/facebook/react/pull/30820
This commit is contained in:
Mike Vitousek
2024-08-27 10:11:50 -07:00
parent 96aca5f4f3
commit f2841c2a49
2 changed files with 65 additions and 0 deletions
@@ -0,0 +1,45 @@
## Input
```javascript
// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
import {useRef} from 'react';
component Foo(cond: boolean, cond2: boolean) {
const ref = useRef();
const s = () => {
return ref.current;
};
if (cond) return [s];
else if (cond2) return {s};
else return {s: [s]};
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{cond: false, cond2: false}],
};
```
## Error
```
10 | };
11 |
> 12 | if (cond) return [s];
| ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
13 | else if (cond2) return {s};
14 | else return {s: [s]};
15 | }
```
@@ -0,0 +1,20 @@
// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
import {useRef} from 'react';
component Foo(cond: boolean, cond2: boolean) {
const ref = useRef();
const s = () => {
return ref.current;
};
if (cond) return [s];
else if (cond2) return {s};
else return {s: [s]};
}
export const FIXTURE_ENTRYPOINT = {
fn: Foo,
params: [{cond: false, cond2: false}],
};