[compiler] Fixture to show ref-in-render enforcement issue with useCa…

…llback

Test Plan:
Documents that useCallback calls interfere with it being ok for refs to escape as part of functions into jsx

ghstack-source-id: a5df427981ca32406fb2325e583b64bbe26b1cdd
Pull Request resolved: #30714

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md

@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+   8 |   };
+   9 |
+> 10 |   return s;
+     |          ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $25:TObject<BuiltInFunction> (10:10)
+  11 | }
+  12 |
+  13 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js

@@ -0,0 +1,16 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md

@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <a r={s} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+   4 |   const ref = useRef();
+   5 |
+>  6 |   const s = useCallback(() => {
+     |                         ^^^^^^^
+>  7 |     return ref.current;
+     | ^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   });
+     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $27:TObject<BuiltInFunction> (6:8)
+   9 |
+  10 |   return <a r={s} />;
+  11 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js

@@ -0,0 +1,16 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <a r={s} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};