[compiler] Add enableUseKeyedState flag and improve setState-in-render errors (#35230)

Adds a new `enableUseKeyedState` compiler flag that changes the error
message for unconditional setState calls during render.

When `enableUseKeyedState` is enabled, the error recommends using
`useKeyedState(initialState, key)` to reset state when dependencies
change. When disabled (the default), it links to the React docs for the
manual pattern of storing previous values in state.

Both error messages now include helpful bullet points explaining the two
main alternatives:
1. Use useKeyedState (or manual pattern) to reset state when other
state/props change
2. Compute derived data directly during render without using state

Author: poteto

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) {