compiler: ValidateNoRefInRender detects writes of refs

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts

@@ -10,6 +10,7 @@ import {
  HIRFunction,
  IdentifierId,
  Place,
+ SourceLocation,
  isRefValueType,
  isUseRefType,
 } from "../HIR";
@@ -117,7 +118,12 @@ function validateNoRefAccessInRenderImpl(
  case "MethodCall": {
  if (!isEffectHook(instr.value.property.identifier)) {
  for (const operand of eachInstructionValueOperand(instr.value)) {
- validateNoRefAccess(errors, refAccessingFunctions, operand);
+ validateNoRefAccess(
+ errors,
+ refAccessingFunctions,
+ operand,
+ operand.loc
+ );
  }
  }
  break;
@@ -138,15 +144,43 @@ function validateNoRefAccessInRenderImpl(
  });
  }
  for (const operand of eachInstructionValueOperand(instr.value)) {
- validateNoRefAccess(errors, refAccessingFunctions, operand);
+ validateNoRefAccess(
+ errors,
+ refAccessingFunctions,
+ operand,
+ operand.loc
+ );
  }
  }
  break;
  }
  case "ObjectExpression":
  case "ArrayExpression": {
  for (const operand of eachInstructionValueOperand(instr.value)) {
- validateNoRefAccess(errors, refAccessingFunctions, operand);
+ validateNoRefAccess(
+ errors,
+ refAccessingFunctions,
+ operand,
+ operand.loc
+ );
+ }
+ break;
+ }
+ case "PropertyDelete":
+ case "PropertyStore":
+ case "ComputedDelete":
+ case "ComputedStore": {
+ validateNoRefAccess(
+ errors,
+ refAccessingFunctions,
+ instr.value.object,
+ instr.loc
+ );
+ for (const operand of eachInstructionValueOperand(instr.value)) {
+ if (operand === instr.value.object) {
+ continue;
+ }
+ validateNoRefValueAccess(errors, refAccessingFunctions, operand);
  }
  break;
  }
@@ -172,12 +206,12 @@ function validateNoRefAccessInRenderImpl(
 
 function validateNoRefValueAccess(
  errors: CompilerError,
- unconditionalSetStateFunctions: Set<IdentifierId>,
+ refAccessingFunctions: Set<IdentifierId>,
  operand: Place
 ): void {
  if (
  isRefValueType(operand.identifier) ||
- unconditionalSetStateFunctions.has(operand.identifier.id)
+ refAccessingFunctions.has(operand.identifier.id)
  ) {
  errors.push({
  severity: ErrorSeverity.InvalidReact,
@@ -192,20 +226,25 @@ function validateNoRefValueAccess(
 
 function validateNoRefAccess(
  errors: CompilerError,
- unconditionalSetStateFunctions: Set<IdentifierId>,
- operand: Place
+ refAccessingFunctions: Set<IdentifierId>,
+ operand: Place,
+ loc: SourceLocation
 ): void {
  if (
  isRefValueType(operand.identifier) ||
  isUseRefType(operand.identifier) ||
- unconditionalSetStateFunctions.has(operand.identifier.id)
+ refAccessingFunctions.has(operand.identifier.id)
  ) {
  errors.push({
  severity: ErrorSeverity.InvalidReact,
  reason:
  "Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)",
- loc: operand.loc,
- description: `Cannot access ref value at ${printPlace(operand)}`,
+ loc: loc,
+ description:
+ operand.identifier.name !== null &&
+ operand.identifier.name.kind === "named"
+ ? `Cannot access ref value \`${operand.identifier.name.value}\``
+ : null,
  suggestions: null,
  });
  }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md

@@ -22,7 +22,7 @@ function Component(props) {
  7 | return <Foo item={item} current={current} />;
  8 | };
 > 9 | return <Items>{props.items.map((item) => renderItem(item))}</Items>;
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at mutate? $64[13:15] (9:9)
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
  10 | }
  11 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md

@@ -18,7 +18,7 @@ function Component(props) {
  2 | function Component(props) {
  3 | const ref = useRef(null);
 > 4 | const x = foo(ref);
- | ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at mutate? $21[6:8]:TObject<BuiltInUseRefId> (4:4)
+ | ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
  5 | return x.current;
  6 | }
  7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md

@@ -21,7 +21,7 @@ function Component(props) {
  6 | return <Foo item={item} current={current} />;
  7 | };
 > 8 | return <Items>{props.items.map((item) => renderItem(item))}</Items>;
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at mutate? $60[14:16] (8:8)
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (8:8)
  9 | }
  10 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md

@@ -15,10 +15,13 @@ function Component(props) {
 ## Error
 
 ```
+ 2 | function Component(props) {
  3 | const ref = useRef(null);
- 4 | ref.current = props.value;
-> 5 | return ref.current;
- | ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $24:TObject<BuiltInRefValue> (5:5)
+> 4 | ref.current = props.value;
+ | ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $24:TObject<BuiltInRefValue> (5:5)
+ 5 | return ref.current;
  6 | }
  7 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md

@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+ const ref = useRef({ inner: null });
+ ref.current.inner = props.value;
+ return ref.current.inner;
+}
+
+```
+
+
+## Error
+
+```
+ 2 | function Component(props) {
+ 3 | const ref = useRef({ inner: null });
+> 4 | ref.current.inner = props.value;
+ | ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $30:TObject<BuiltInRefValue> (5:5)
+ 5 | return ref.current.inner;
+ 6 | }
+ 7 |
+```
+
+

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.js

@@ -0,0 +1,6 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+ const ref = useRef({ inner: null });
+ ref.current.inner = props.value;
+ return ref.current.inner;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md

@@ -25,7 +25,7 @@ function Foo({ a }) {
  3 | const ref = useRef();
  4 | // type information is lost here as we don't track types of fields
 > 5 | const val = { ref };
- | ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at capture $29:TObject<BuiltInUseRefId> (5:5)
+ | ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
  6 | // without type info, we don't know that val.ref.current is a ref value so we
  7 | // *would* end up depending on val.ref.current
  8 | // however, this is an instance of accessing a ref during render and is disallowed

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md

@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function useHook({ value }) {
+ const ref = useRef(null);
+ // Writing to a ref in render is against the rules:
+ ref.current = value;
+ // returning a ref is allowed, so this alone doesn't trigger an error:
+ return ref;
+}
+
+```
+
+
+## Error
+
+```
+ 3 | const ref = useRef(null);
+ 4 | // Writing to a ref in render is against the rules:
+> 5 | ref.current = value;
+ | ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
+ 6 | // returning a ref is allowed, so this alone doesn't trigger an error:
+ 7 | return ref;
+ 8 | }
+```
+
+

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.js

@@ -0,0 +1,8 @@
+// @validateRefAccessDuringRender
+function useHook({ value }) {
+ const ref = useRef(null);
+ // Writing to a ref in render is against the rules:
+ ref.current = value;
+ // returning a ref is allowed, so this alone doesn't trigger an error:
+ return ref;
+}

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

@@ -23,7 +23,7 @@ export const FIXTURE_ENTRYPOINT = {
  1 | // @validateRefAccessDuringRender:true
  2 | function Foo(props, ref) {
 > 3 | console.log(ref.current);
- | ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $16:TObject<BuiltInRefValue> (3:3)
+ | ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
  4 | return <div>{props.bar}</div>;
  5 | }
  6 |