[compiler] Enable validateExhaustiveMemoizationDependencies by default

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

@@ -221,7 +221,7 @@ export const EnvironmentConfigSchema = z.object({
   /**
    * Validate that dependencies supplied to manual memoization calls are exhaustive.
    */
-  validateExhaustiveMemoizationDependencies: z.boolean().default(false),
+  validateExhaustiveMemoizationDependencies: z.boolean().default(true),
 
   /**
    * When this is true, rather than pruning existing manual memoization but ensuring or validating

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import {useMemo} from 'react';
 
 const someGlobal = {value: 0};
@@ -33,7 +33,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import { useMemo } from "react";
 
 const someGlobal = { value: 0 };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js

@@ -1,4 +1,4 @@
-// @enablePreserveExistingMemoizationGuarantees:false
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import {useMemo} from 'react';
 
 const someGlobal = {value: 0};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import {useMemo} from 'react';
 import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
 
@@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import { useMemo } from "react";
 import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import {useMemo} from 'react';
 import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.expect.md

@@ -2,6 +2,7 @@
 ## Input
 
 ```javascript
+// @validateExhaustiveMemoizationDependencies:false
 import {useMemo} from 'react';
 
 function Component(props) {
@@ -30,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
 import { useMemo } from "react";
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.js

@@ -1,3 +1,4 @@
+// @validateExhaustiveMemoizationDependencies:false
 import {useMemo} from 'react';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @eslintSuppressionRules:["my-app","react-rule"]
+// @eslintSuppressionRules:["my-app","react-rule"] @validateExhaustiveMemoizationDependencies:false
 
 /* eslint-disable my-app/react-rule */
 function lowercasecomponent() {
@@ -26,7 +26,7 @@ Error: React Compiler has skipped optimizing this component because one or more
 React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`.
 
 error.bailout-on-suppression-of-custom-rule.ts:3:0
-  1 | // @eslintSuppressionRules:["my-app","react-rule"]
+  1 | // @eslintSuppressionRules:["my-app","react-rule"] @validateExhaustiveMemoizationDependencies:false
   2 |
 > 3 | /* eslint-disable my-app/react-rule */
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.js

@@ -1,4 +1,4 @@
-// @eslintSuppressionRules:["my-app","react-rule"]
+// @eslintSuppressionRules:["my-app","react-rule"] @validateExhaustiveMemoizationDependencies:false
 
 /* eslint-disable my-app/react-rule */
 function lowercasecomponent() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md

@@ -2,6 +2,7 @@
 ## Input
 
 ```javascript
+// @validateExhaustiveMemoizationDependencies:false
 /* eslint-disable react-hooks/rules-of-hooks */
 function lowercasecomponent() {
   'use forget';
@@ -23,25 +24,26 @@ Error: React Compiler has skipped optimizing this component because one or more
 
 React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.
 
-error.invalid-sketchy-code-use-forget.ts:1:0
-> 1 | /* eslint-disable react-hooks/rules-of-hooks */
+error.invalid-sketchy-code-use-forget.ts:2:0
+  1 | // @validateExhaustiveMemoizationDependencies:false
+> 2 | /* eslint-disable react-hooks/rules-of-hooks */
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
-  2 | function lowercasecomponent() {
-  3 |   'use forget';
-  4 |   const x = [];
+  3 | function lowercasecomponent() {
+  4 |   'use forget';
+  5 |   const x = [];
 
 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
 React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`.
 
-error.invalid-sketchy-code-use-forget.ts:5:2
-  3 |   'use forget';
-  4 |   const x = [];
-> 5 |   // eslint-disable-next-line react-hooks/rules-of-hooks
+error.invalid-sketchy-code-use-forget.ts:6:2
+  4 |   'use forget';
+  5 |   const x = [];
+> 6 |   // eslint-disable-next-line react-hooks/rules-of-hooks
     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
-  6 |   return <div>{x}</div>;
-  7 | }
-  8 | /* eslint-enable react-hooks/rules-of-hooks */
+  7 |   return <div>{x}</div>;
+  8 | }
+  9 | /* eslint-enable react-hooks/rules-of-hooks */
 ```
 
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.js

@@ -1,3 +1,4 @@
+// @validateExhaustiveMemoizationDependencies:false
 /* eslint-disable react-hooks/rules-of-hooks */
 function lowercasecomponent() {
   'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// Note: Everything below this is sketchy
+// Note: Everything below this is sketchy @validateExhaustiveMemoizationDependencies:false
 /* eslint-disable react-hooks/rules-of-hooks */
 function lowercasecomponent() {
   'use forget';
@@ -43,7 +43,7 @@ Error: React Compiler has skipped optimizing this component because one or more
 React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.
 
 error.invalid-unclosed-eslint-suppression.ts:2:0
-  1 | // Note: Everything below this is sketchy
+  1 | // Note: Everything below this is sketchy @validateExhaustiveMemoizationDependencies:false
 > 2 | /* eslint-disable react-hooks/rules-of-hooks */
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
   3 | function lowercasecomponent() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.js

@@ -1,4 +1,4 @@
-// Note: Everything below this is sketchy
+// Note: Everything below this is sketchy @validateExhaustiveMemoizationDependencies:false
 /* eslint-disable react-hooks/rules-of-hooks */
 function lowercasecomponent() {
   'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import {useCallback, useRef} from 'react';
 
 function useCustomRef() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import {useCallback, useRef} from 'react';
 
 function useCustomRef() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validatePreserveExistingMemoizationGuarantees
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import {useCallback, useRef} from 'react';
 
 function useCustomRef() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.js

@@ -1,4 +1,4 @@
-// @validatePreserveExistingMemoizationGuarantees
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
 import {useCallback, useRef} from 'react';
 
 function useCustomRef() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md

@@ -2,11 +2,14 @@
 ## Input
 
 ```javascript
+import {arrayPush} from 'shared-runtime';
+
+// @validateExhaustiveMemoizationDependencies
 function Component() {
   const item = [];
   const foo = useCallback(
     () => {
-      item.push(1);
+      arrayPush(item, 1);
     }, // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
@@ -22,18 +25,18 @@ function Component() {
 ```
 Found 1 error:
 
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+Error: Found missing memoization dependencies
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`.
+Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
 
-error.sketchy-code-exhaustive-deps.ts:6:7
-  4 |     () => {
-  5 |       item.push(1);
-> 6 |     }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
-  7 |     []
-  8 |   );
-  9 |
+error.sketchy-code-exhaustive-deps.ts:8:16
+   6 |   const foo = useCallback(
+   7 |     () => {
+>  8 |       arrayPush(item, 1);
+     |                 ^^^^ Missing dependency `item`
+   9 |     }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  10 |     []
+  11 |   );
 ```
 
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.js

@@ -1,8 +1,11 @@
+import {arrayPush} from 'shared-runtime';
+
+// @validateExhaustiveMemoizationDependencies
 function Component() {
   const item = [];
   const foo = useCallback(
     () => {
-      item.push(1);
+      arrayPush(item, 1);
     }, // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md

@@ -2,6 +2,7 @@
 ## Input
 
 ```javascript
+// @validateExhaustiveMemoizationDependencies:false
 /* eslint-disable react-hooks/rules-of-hooks */
 function lowercasecomponent() {
   const x = [];
@@ -27,12 +28,13 @@ Error: React Compiler has skipped optimizing this component because one or more
 
 React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.
 
-error.sketchy-code-rules-of-hooks.ts:1:0
-> 1 | /* eslint-disable react-hooks/rules-of-hooks */
+error.sketchy-code-rules-of-hooks.ts:2:0
+  1 | // @validateExhaustiveMemoizationDependencies:false
+> 2 | /* eslint-disable react-hooks/rules-of-hooks */
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
-  2 | function lowercasecomponent() {
-  3 |   const x = [];
-  4 |   return <div>{x}</div>;
+  3 | function lowercasecomponent() {
+  4 |   const x = [];
+  5 |   return <div>{x}</div>;
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.js

@@ -1,3 +1,4 @@
+// @validateExhaustiveMemoizationDependencies:false
 /* eslint-disable react-hooks/rules-of-hooks */
 function lowercasecomponent() {
   const x = [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import {useFragment} from 'react-relay';
 import LogEvent from 'LogEvent';
 import {useCallback, useMemo} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js

@@ -1,4 +1,4 @@
-// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import {useFragment} from 'react-relay';
 import LogEvent from 'LogEvent';
 import {useCallback, useMemo} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import {useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 
@@ -29,7 +29,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c2 } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { c as _c2 } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import { useMemo, useState } from "react";
 import { ValidateMemoization } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js

@@ -1,4 +1,4 @@
-// @enablePreserveExistingMemoizationGuarantees:false
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
 import {useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges
+// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges @validateExhaustiveMemoizationDependencies:false
 import {useEffect, useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 
@@ -46,7 +46,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enableResetCacheOnSourceFileChanges
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enableResetCacheOnSourceFileChanges @validateExhaustiveMemoizationDependencies:false
 import { useEffect, useMemo, useState } from "react";
 import { ValidateMemoization } from "shared-runtime";
 
@@ -63,12 +63,12 @@ function unsafeUpdateConst() {
 function Component() {
   const $ = _c(3);
   if (
-    $[0] !== "a585d27423c1181e7b6305ff909458183d284658c3c3d2e3764e1128be302fd7"
+    $[0] !== "36c02976ff5bc474b7510128ea8220ffe31d92cd5d245148ed0a43146d18ded4"
   ) {
     for (let $i = 0; $i < 3; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "a585d27423c1181e7b6305ff909458183d284658c3c3d2e3764e1128be302fd7";
+    $[0] = "36c02976ff5bc474b7510128ea8220ffe31d92cd5d245148ed0a43146d18ded4";
   }
   useState(_temp);
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.js

@@ -1,4 +1,4 @@
-// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges
+// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges @validateExhaustiveMemoizationDependencies:false
 import {useEffect, useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';