[compiler] Make ref enforcement on by default

Summary:
The change earlier in this stack makes it less safe to have ref enforcement disabled. This diff enables it by default.

ghstack-source-id: d3ab5f1
Pull Request resolved: #30716

Author: mvitousek

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -223,7 +223,7 @@ const EnvironmentConfigSchema = z.object({
   validateHooksUsage: z.boolean().default(true),
 
   // Validate that ref values (`ref.current`) are not accessed during render.
-  validateRefAccessDuringRender: z.boolean().default(false),
+  validateRefAccessDuringRender: z.boolean().default(true),
 
   /*
    * Validates that setState is not unconditionally called during render, as it can lead to

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md

@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+  10 |   };
+  11 |   const moveLeft = {
+> 12 |     handler: handleKey('left'),
+     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which 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) (12:12)
+
+InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+  13 |   };
+  14 |   const moveRight = {
+  15 |     handler: handleKey('right'),
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md

@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+import {Stringify, identity, mutate, CONST_TRUE} from 'shared-runtime';
+
+function Foo(props, ref) {
+  const value = {};
+  if (CONST_TRUE) {
+    mutate(value);
+    return <Stringify ref={ref} />;
+  }
+  mutate(value);
+  if (CONST_TRUE) {
+    return <Stringify ref={identity(ref)} />;
+  }
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}, {current: 'fake-ref-object'}],
+};
+
+```
+
+
+## Error
+
+```
+   9 |   mutate(value);
+  10 |   if (CONST_TRUE) {
+> 11 |     return <Stringify ref={identity(ref)} />;
+     |                                     ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (11:11)
+  12 |   }
+  13 |   return value;
+  14 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.tsx renamed to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.tsx

@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  ref.current.inner = null;
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+  11 |   });
+  12 |
+> 13 |   ref.current.inner = null;
+     |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+  14 |
+  15 |   return <input onChange={onChange} />;
+  16 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md

@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @enableReactiveScopesInHIR:false
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+  11 |   };
+  12 |   const moveLeft = {
+> 13 |     handler: handleKey('left'),
+     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which 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) (13:13)
+
+InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
+  14 |   };
+  15 |   const moveRight = {
+  16 |     handler: handleKey('right'),
+```
+          
+