[compiler] Add enableUseKeyedState flag and improve setState-in-render errors

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

@@ -318,6 +318,12 @@ export const EnvironmentConfigSchema = z.object({
    */
   validateNoSetStateInRender: z.boolean().default(true),
 
+  /**
+   * When enabled, changes the behavior of validateNoSetStateInRender to recommend
+   * using useKeyedState instead of the manual pattern for resetting state.
+   */
+  enableUseKeyedState: z.boolean().default(false),
+
   /**
    * Validates that setState is not called synchronously within an effect (useEffect and friends).
    * Scheduling a setState (with an event listener, subscription, etc) is valid.

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

@@ -155,20 +155,40 @@ function validateNoSetStateInRenderImpl(
                 }),
               );
             } else if (unconditionalBlocks.has(block.id)) {
-              errors.pushDiagnostic(
-                CompilerDiagnostic.create({
-                  category: ErrorCategory.RenderSetState,
-                  reason:
-                    'Calling setState during render may trigger an infinite loop',
-                  description:
-                    'Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)',
-                  suggestions: null,
-                }).withDetails({
-                  kind: 'error',
-                  loc: callee.loc,
-                  message: 'Found setState() in render',
-                }),
-              );
+              const enableUseKeyedState = fn.env.config.enableUseKeyedState;
+              if (enableUseKeyedState) {
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.RenderSetState,
+                    reason: 'Cannot call setState during render',
+                    description:
+                      'Calling setState during render may trigger an infinite loop.\n' +
+                      '* To reset state when other state/props change, use `const [state, setState] = useKeyedState(initialState, key)` to reset `state` when `key` changes.\n' +
+                      '* To derive data from other state/props, compute the derived data during render without using state',
+                    suggestions: null,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: callee.loc,
+                    message: 'Found setState() in render',
+                  }),
+                );
+              } else {
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.RenderSetState,
+                    reason: 'Cannot call setState during render',
+                    description:
+                      'Calling setState during render may trigger an infinite loop.\n' +
+                      '* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders\n' +
+                      '* To derive data from other state/props, compute the derived data during render without using state',
+                    suggestions: null,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: callee.loc,
+                    message: 'Found setState() in render',
+                  }),
+                );
+              }
             }
           }
           break;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md

@@ -24,9 +24,11 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-setState-in-render-unbound-state.ts:5:2
   3 |   // infer the type of destructured properties after a hole in the array

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.expect.md

@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender @enableUseKeyedState
+import {useState} from 'react';
+
+function Component() {
+  const [total, setTotal] = useState(0);
+  setTotal(42);
+  return total;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, use `const [state, setState] = useKeyedState(initialState, key)` to reset `state` when `key` changes.
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-setstate-unconditional-with-keyed-state.ts:6:2
+  4 | function Component() {
+  5 |   const [total, setTotal] = useState(0);
+> 6 |   setTotal(42);
+    |   ^^^^^^^^ Found setState() in render
+  7 |   return total;
+  8 | }
+  9 |
+```
+
+

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.js

@@ -0,0 +1,14 @@
+// @validateNoSetStateInRender @enableUseKeyedState
+import {useState} from 'react';
+
+function Component() {
+  const [total, setTotal] = useState(0);
+  setTotal(42);
+  return total;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.expect.md

@@ -25,9 +25,11 @@ function useCustomState(init) {
 ```
 Found 2 errors:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-unconditional-set-state-hook-return-in-render.ts:6:2
   4 |   const aliased = setState;
@@ -38,9 +40,11 @@ error.invalid-unconditional-set-state-hook-return-in-render.ts:6:2
   8 |
   9 |   return state;
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-unconditional-set-state-hook-return-in-render.ts:7:2
    5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md

@@ -21,9 +21,11 @@ function Component(props) {
 ```
 Found 2 errors:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-unconditional-set-state-in-render.ts:6:2
   4 |   const aliased = setX;
@@ -34,9 +36,11 @@ error.invalid-unconditional-set-state-in-render.ts:6:2
   8 |
   9 |   return x;
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-unconditional-set-state-in-render.ts:7:2
    5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.expect.md

@@ -20,9 +20,11 @@ function Component({setX}) {
 ```
 Found 2 errors:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-unconditional-set-state-prop-in-render.ts:5:2
   3 |   const aliased = setX;
@@ -33,9 +35,11 @@ error.invalid-unconditional-set-state-prop-in-render.ts:5:2
   7 |
   8 |   return x;
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.invalid-unconditional-set-state-prop-in-render.ts:6:2
   4 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.expect.md

@@ -24,9 +24,11 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.unconditional-set-state-in-render-after-loop-break.ts:11:2
    9 |     }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.expect.md

@@ -19,9 +19,11 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.unconditional-set-state-in-render-after-loop.ts:6:2
   4 |   for (const _ of props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.expect.md

@@ -24,9 +24,11 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.unconditional-set-state-in-render-with-loop-throw.ts:11:2
    9 |     }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.expect.md

@@ -22,9 +22,11 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.unconditional-set-state-lambda.ts:8:2
    6 |     setX(1);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.expect.md

@@ -30,9 +30,11 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Calling setState during render may trigger an infinite loop
+Error: Cannot call setState during render
 
-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
 
 error.unconditional-set-state-nested-function-expressions.ts:16:2
   14 |     bar();