[enableInfiniteRenderLoopDetection] Add a flag to force throwing (#36357)

Adds a `enableInfiniteRenderLoopDetectionForceThrow` flag, which changes
the detection mechanism behaviour to start throwing, when the loop is
observed. By default, the value is set to `false`, also made dynamic
from the start for `www`.

Author: hoxyq

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1793,7 +1793,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's a synchronous render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -1831,7 +1838,14 @@ describe('ReactUpdates', () => {
 });
 
 it("warns about potential infinite loop if there's an async render phase update on another component",async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 letsetState;
@@ -2007,7 +2021,14 @@ describe('ReactUpdates', () => {
 });
 
 it('warns instead of throwing when infinite Suspense ping loop is detected via enableInfiniteRenderLoopDetection during commit phase',async()=>{
-if(!__DEV__||gate(flags=>!flags.enableInfiniteRenderLoopDetection)){
+if(
+!__DEV__||
+gate(
+flags=>
+!flags.enableInfiniteRenderLoopDetection||
+flags.enableInfiniteRenderLoopDetectionForceThrow,
+)
+){
 return;
 }
 
@@ -2115,6 +2136,133 @@ describe('ReactUpdates', () => {
 expect(errors).toEqual([]);
 });
 
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when sync render-phase update loop is detected with force-throw enabled',async()=>{
+// Render-phase setState on another component's hook produces a sync
+// recursive update. With ForceThrow enabled this should throw via
+// throwForcedInfiniteRenderLoopError instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop){
+returnnull;
+}
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constcaptureError=error=>{
+errors.push(error.message);
+// Stop scheduling new updates so the test (and the gate-off variant
+// where the legacy error path is recoverable) can terminate cleanly
+// without tripping the babel infinite-loop guard.
+shouldStop=true;
+};
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: captureError,
+onRecoverableError: captureError,
+onCaughtError: captureError,
+});
+
+// The render-phase setState path also produces a dev-only "Cannot update
+// a component while rendering a different component" console.error on
+// every recursion. Swallow those so the test framework doesn't require
+// us to assert each one.
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+root.render(<App/>);
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
+// @gate enableInfiniteRenderLoopDetection && enableInfiniteRenderLoopDetectionForceThrow
+it('throws when phase-spawn update loop is detected with force-throw enabled',async()=>{
+// Wrapping the initial render in startTransition makes the render-phase
+// setState inherit a non-sync transition lane. After commit, the next
+// render is non-sync, so the loop detector classifies the recursion as
+// NESTED_UPDATE_PHASE_SPAWN (rather than SYNC_LANE). With ForceThrow
+// enabled, this branch should throw via throwForcedInfiniteRenderLoopError
+// instead of only warning in DEV.
+letsetState;
+letshouldStop=false;
+// Hard cap on Child renders. Without enableInfiniteRenderLoopDetection,
+// the PHASE_SPAWN branch is gated off entirely, so no throw fires and
+// the loop would otherwise run until the babel infinite-loop guard.
+letrenderCount=0;
+constRENDER_CAP=100;
+functionApp(){
+const[,_setState]=React.useState(0);
+setState=_setState;
+return<Child/>;
+}
+
+functionChild(){
+if(shouldStop||renderCount>=RENDER_CAP){
+returnnull;
+}
+renderCount++;
+setState(n=>n+1);
+returnnull;
+}
+
+constcontainer=document.createElement('div');
+consterrors=[];
+constroot=ReactDOMClient.createRoot(container,{
+onUncaughtError: error=>{
+errors.push(error.message);
+shouldStop=true;
+},
+});
+
+constoriginalConsoleError=console.error;
+console.error=msg=>{
+if(
+typeofmsg==='string'&&
+msg.startsWith('Cannot update a component')
+){
+return;
+}
+originalConsoleError(msg);
+};
+try{
+awaitact(()=>{
+React.startTransition(()=>root.render(<App/>));
+});
+}finally{
+console.error=originalConsoleError;
+}
+
+expect(errors.length).toBeGreaterThanOrEqual(1);
+expect(errors[0]).toContain(
+'Maximum update depth exceeded. This could be an infinite loop.',
+);
+});
+
 it('prevents infinite update loop triggered by too many updates in ref callbacks',async()=>{
 letscheduleUpdate;
 functionTooManyRefUpdates(){

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -51,6 +51,7 @@ import {
 disableLegacyContext,
 alwaysThrottleRetries,
 enableInfiniteRenderLoopDetection,
+enableInfiniteRenderLoopDetectionForceThrow,
 disableLegacyMode,
 enableComponentPerformanceTrack,
 enableYieldingBeforePassive,
@@ -5175,6 +5176,27 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
 retryTimedOutBoundary(boundaryFiber,retryLane);
 }
 
+functionthrowForcedInfiniteRenderLoopError(
+root: FiberRoot|null,
+renderLanes: Lanes,
+): empty{
+if(root!==null){
+// Disable concurrent error recovery for the in-progress render so the thrown
+// error reaches the nearest error boundary and breaks the infinite update
+// loop instead of being silently retried by the recovery mechanism.
+root.errorRecoveryDisabledLanes=mergeLanes(
+root.errorRecoveryDisabledLanes,
+renderLanes,
+);
+}
+thrownewError(
+'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
+'repeatedly calls setState during render phase or inside useLayoutEffect, '+
+'causing infinite render loop. React limits the number of nested updates to '+
+'prevent infinite loops.',
+);
+}
+
 exportfunctionthrowIfInfiniteUpdateLoopDetected(
 isFromInfiniteRenderLoopDetectionInstrumentation: boolean,
 ){
@@ -5191,10 +5213,16 @@ export function throwIfInfiniteUpdateLoopDetected(
 if(updateKind===NESTED_UPDATE_SYNC_LANE){
 if(
 isFromInfiniteRenderLoopDetectionInstrumentation||
-(executionContext&RenderContext&&workInProgressRoot!==null)
+(executionContext&RenderContext)!==NoContext
 ){
-// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection, warn instead of throwing.
-if(__DEV__){
+// This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
+// warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+
@@ -5211,7 +5239,12 @@ export function throwIfInfiniteUpdateLoopDetected(
 );
 }
 }elseif(updateKind===NESTED_UPDATE_PHASE_SPAWN){
-if(__DEV__){
+if(enableInfiniteRenderLoopDetectionForceThrow){
+throwForcedInfiniteRenderLoopError(
+workInProgressRoot,
+workInProgressRootRenderLanes,
+);
+}elseif(__DEV__){
 console.error(
 'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component '+
 'repeatedly calls setState during render phase or inside useLayoutEffect, '+

packages/shared/ReactFeatureFlags.js

@@ -144,6 +144,12 @@ export const transitionLaneExpirationMs = 5000;
  * by setState or similar outside of the component owning the state.
  */
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+/**
+ * When `enableInfiniteRenderLoopDetection` is on, forces the detection
+ * mechanism to throw instead of only warning in cases where it would
+ * otherwise downgrade to a warning.
+ */
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableFragmentRefs: boolean=true;
 exportconstenableFragmentRefsScrollIntoView: boolean=true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -47,6 +47,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -31,6 +31,7 @@ export const enableCreateEventHandleAPI: boolean = false;
 exportconstenableMoveBefore: boolean=true;
 exportconstenableFizzExternalRuntime: boolean=true;
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 exportconstenableLegacyCache: boolean=false;
 exportconstenableLegacyFBSupport: boolean=false;
 exportconstenableLegacyHidden: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -52,6 +52,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableEagerAlternateStateNodeCleanup: boolean=true;
 exportconstenableEffectEventMutationPhase: boolean=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -26,6 +26,7 @@ export const enableCreateEventHandleAPI = false;
 exportconstenableMoveBefore=false;
 exportconstenableFizzExternalRuntime=true;
 exportconstenableInfiniteRenderLoopDetection=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow=false;
 exportconstenableLegacyCache=false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableLegacyHidden=false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -54,6 +54,7 @@ export const passChildrenWhenCloningPersistedNodes: boolean = false;
 exportconstdisableClientCache: boolean=true;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=false;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=false;
 
 exportconstenableReactTestRendererWarning: boolean=false;
 exportconstdisableLegacyMode: boolean=true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -27,6 +27,7 @@ export const transitionLaneExpirationMs = 5000;
 exportconstenableSchedulingProfiler: boolean=__VARIANT__;
 
 exportconstenableInfiniteRenderLoopDetection: boolean=__VARIANT__;
+exportconstenableInfiniteRenderLoopDetectionForceThrow: boolean=__VARIANT__;
 
 exportconstenableFastAddPropertiesInDiffing: boolean=__VARIANT__;
 exportconstenableSuspenseyImages: boolean=__VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -20,6 +20,7 @@ export const {
  disableSchedulerTimeoutInWorkLoop,
  enableEffectEventMutationPhase,
  enableInfiniteRenderLoopDetection,
+ enableInfiniteRenderLoopDetectionForceThrow,
  enableNoCloningMemoCache,
  enableObjectFiber,
  enableRetryLaneExpiration,