Skip to content

[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hbrooks wants to merge 5 commits into
base:main
Choose a base branch
from
Open

[flag] warn for setState in render on initial mount #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3b4bf1e
feature flags
rickhanlonii Nov 11, 2025
b78bb35
Fiber warning
rickhanlonii Nov 11, 2025
a6e5b8c
Fizz warning
rickhanlonii Nov 11, 2025
48f80d6
Tests
rickhanlonii Nov 11, 2025
7820ad0
Merge branch 'main' into rh/set-state-mount-error
rickhanlonii Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
);

await act(() => resolveText('Child'));
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}
expect(getVisibleChildren(container)).toEqual(
<div>
<div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
await clientAct(() => {
ReactDOMClient.hydrateRoot(container, <App />);
});
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}
expect(childRef.current).toBe(child);
});

Expand Down
50 changes: 40 additions & 10 deletions packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
return <Text text={'Count: ' + count} />;
}

const domNode = await render(<Counter />);
const domNode = await render(
<Counter />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
expect(domNode.textContent).toEqual('Count: 12');
});

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
return <span>Count: {count}</span>;
}

const domNode = await render(<Counter />);
const domNode = await render(
<Counter />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
expect(domNode.textContent).toEqual('Count: 3');
});

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
return <Text text={count} />;
}

const domNode = await render(<Counter />);
const domNode = await render(
<Counter />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);

expect(clearLog()).toEqual([
'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
return <Text text={count} />;
}

const domNode = await render(<Counter />);
const domNode = await render(
<Counter />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);

expect(clearLog()).toEqual([
// The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
return <Text text={capitalizedText} />;
}

const domNode = await render(<CapitalizedText text="hello" />);
const domNode = await render(
<CapitalizedText text="hello" />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
expect(clearLog()).toEqual([
"Capitalize 'hello'",
"Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
return <Text text={capitalizedText} />;
}

const domNode = await render(<CapitalizedText text="hello" />);
const domNode = await render(
<CapitalizedText text="hello" />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
expect(clearLog()).toEqual([
"Capitalize 'hello'",
0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
return <span ref={ref}>Count: {count}</span>;
}

const domNode = await render(<Counter />);
const domNode = await render(
<Counter />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
expect(clearLog()).toEqual([0, 1, 2, 3]);
expect(domNode.textContent).toEqual('Count: 3');
},
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
return <span ref={ref}>Count: {count}</span>;
}

const domNode = await render(<Counter />);
const domNode = await render(
<Counter />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
expect(clearLog()).toEqual([0, 1, 2, 3]);
expect(domNode.textContent).toEqual('Count: 3');
},
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
return <Text text={capitalizeText()} />;
}

const domNode = await render(<CapitalizedText text="hello" />);
const domNode = await render(
<CapitalizedText text="hello" />,
gate('disableSetStateInRenderOnMount') ? 1 : 0,
);
const [first, second, third, fourth, result] = clearLog();
expect(first).toBe(second);
expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
);
expect(domNode1.textContent).toEqual('42');

const domNode2 = await render(<ReadInReducer />, 1);
const domNode2 = await render(
<ReadInReducer />,
gate('disableSetStateInRenderOnMount') ? 2 : 1,
);
expect(domNode2.textContent).toEqual('42');
});
});
Expand Down
21 changes: 21 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMUseId-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

const InternalTestUtils = require('internal-test-utils');
waitForPaint = InternalTestUtils.waitForPaint;
assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

// Test Environment
const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
pipe(writable);
});
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}

await clientAct(async () => {
ReactDOMClient.hydrateRoot(container, <App />);
});
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}
expect(container).toMatchInlineSnapshot(`
<div
id="container"
Expand Down
56 changes: 55 additions & 1 deletion packages/react-reconciler/src/ReactFiberHooks.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
enableNoCloningMemoCache,
enableViewTransition,
enableGestureTransition,
disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
HostRoot,
CacheComponent,
HostComponent,
FunctionComponent,
ForwardRef,
SimpleMemoComponent,
} from './ReactWorkTags';
import {
LayoutStatic as LayoutStaticEffect,
Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
}
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
if (disableSetStateInRenderOnMount) {
didWarnAboutRenderUpdateOnMount = new Set<string>();
}
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
if (__DEV__) {
if (disableSetStateInRenderOnMount) {
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// Dedupe by the rendering component because it's the one that needs to be fixed.
// Ignore multiple to prevent spamming console.
if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
didWarnAboutRenderUpdateOnMount.add(componentName);
console.error(
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render',
);
}
}
}
}
}
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
if (__DEV__) {
const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

if (isRenderPhaseUpdate(fiber)) {
enqueueRenderPhaseUpdate(queue, update);
if (__DEV__) {
if (disableSetStateInRenderOnMount) {
if (fiber.alternate === null) {
warnAboutRenderUpdateOnMountInDEV(fiber);
}
}
}
} else {
const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

if (isRenderPhaseUpdate(fiber)) {
enqueueRenderPhaseUpdate(queue, update);
if (__DEV__) {
if (disableSetStateInRenderOnMount) {
if (fiber.alternate === null) {
warnAboutRenderUpdateOnMountInDEV(fiber);
}
}
}
} else {
const alternate = fiber.alternate;
if (
Expand Down
9 changes: 9 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

const root = ReactNoop.createRoot();
await act(() => root.render(<App />));
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}
assertLog([
'Render phase update count from 1 to 2',
'Count: 1',
Expand Down
20 changes: 20 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
const InternalTestUtils = require('internal-test-utils');
assertLog = InternalTestUtils.assertLog;
waitForPaint = InternalTestUtils.waitForPaint;
assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

textCache = new Map();
});
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
await act(() => {
root.render(<App value={1} />);
});
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}
assertLog(['Original: 1', 'Deferred: 1']);

// If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
await act(async () => {
root.render(<App value={1} />);
await waitForPaint(['Original: 1', 'Deferred: 1']);
if (gate('disableSetStateInRenderOnMount')) {
assertConsoleErrorDev([
'A component called setState during the initial render. ' +
'This is deprecated, pass the initial value to useState instead. ' +
'To locate the bad setState() call, follow the stack trace ' +
'as described in https://react.dev/link/setstate-in-render\n' +
' in App (at **)',
]);
}
expect(root).toMatchRenderedOutput(
<div>
<div>Original: 1</div>
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
[flag] warn for setState in render on initial mount by hbrooks · Pull Request #13 · ellipsis-dev-test/react · GitHub
Skip to content
[flag] warn for setState in render on initial mount#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hbrooks
wants to merge
5
commits into

base:main
Choose a base branch

from

 Open


[flag] warn for setState in render on initial mount
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
3b4bf1e

feature flags


rickhanlonii Nov 11, 2025
b78bb35

Fiber warning


rickhanlonii Nov 11, 2025
a6e5b8c

Fizz warning


rickhanlonii Nov 11, 2025
48f80d6

Tests


rickhanlonii Nov 11, 2025
7820ad0

Merge branch 'main' into rh/set-state-mount-error


rickhanlonii Feb 18, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


18 changes: 18 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6490,6 +6490,15 @@ describe('ReactDOMFizzServer', () => {
 );

 await act(() => resolveText('Child'));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(getVisibleChildren(container)).toEqual(
 <div>
 <div id="child">Child:0:3</div>
Expand All@@ -6502,6 +6511,15 @@ describe('ReactDOMFizzServer', () => {
 await clientAct(() => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(childRef.current).toBe(child);
 });

Expand Down

50 changes: 40 additions & 10 deletions
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -164,7 +164,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={'Count: ' + count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 12');
 });

Expand All@@ -177,7 +180,10 @@ describe('ReactDOMServerHooks', () => {
 return <span>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(domNode.textContent).toEqual('Count: 3');
 });

Expand DownExpand Up@@ -246,7 +252,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 'Render: 0',
Expand DownExpand Up@@ -299,7 +308,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={count} />;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );

 expect(clearLog()).toEqual([
 // The count should increase by alternating amounts of 10 and 1
Expand DownExpand Up@@ -366,7 +378,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 "Capitalize 'hello, world.'",
Expand DownExpand Up@@ -400,7 +415,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizedText} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([
 "Capitalize 'hello'",
 0,
Expand DownExpand Up@@ -482,7 +500,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -512,7 +533,10 @@ describe('ReactDOMServerHooks', () => {
 return <span ref={ref}>Count: {count}</span>;
 }

 const domNode = await render(<Counter />);
 const domNode = await render(
 <Counter />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 expect(clearLog()).toEqual([0, 1, 2, 3]);
 expect(domNode.textContent).toEqual('Count: 3');
 },
Expand DownExpand Up@@ -590,7 +614,10 @@ describe('ReactDOMServerHooks', () => {
 return <Text text={capitalizeText()} />;
 }

 const domNode = await render(<CapitalizedText text="hello" />);
 const domNode = await render(
 <CapitalizedText text="hello" />,
 gate('disableSetStateInRenderOnMount') ? 1 : 0,
 );
 const [first, second, third, fourth, result] = clearLog();
 expect(first).toBe(second);
 expect(second).toBe(third);
Expand DownExpand Up@@ -880,7 +907,10 @@ describe('ReactDOMServerHooks', () => {
 );
 expect(domNode1.textContent).toEqual('42');

 const domNode2 = await render(<ReadInReducer />, 1);
 const domNode2 = await render(
 <ReadInReducer />,
 gate('disableSetStateInRenderOnMount') ? 2 : 1,
 );
 expect(domNode2.textContent).toEqual('42');
 });
 });
Expand Down

21 changes: 21 additions & 0 deletions
packages/react-dom/src/__tests__/ReactDOMUseId-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
 beforeEach(() => {
Expand All@@ -43,6 +44,7 @@ describe('useId', () => {

 const InternalTestUtils = require('internal-test-utils');
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 // Test Environment
 const jsdom = new JSDOM(
Expand DownExpand Up@@ -366,9 +368,28 @@ describe('useId', () => {
 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
 pipe(writable);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }

 await clientAct(async () => {
 ReactDOMClient.hydrateRoot(container, <App />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(container).toMatchInlineSnapshot(`
 <div
 id="container"
Expand Down

56 changes: 55 additions & 1 deletion
packages/react-reconciler/src/ReactFiberHooks.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ import {
 enableNoCloningMemoCache,
 enableViewTransition,
 enableGestureTransition,
 disableSetStateInRenderOnMount,
} from 'shared/ReactFeatureFlags';
import {
 REACT_CONTEXT_TYPE,
Expand DownExpand Up@@ -79,7 +80,14 @@ import {
 higherEventPriority,
} from './ReactEventPriorities';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
import {
 HostRoot,
 CacheComponent,
 HostComponent,
 FunctionComponent,
 ForwardRef,
 SimpleMemoComponent,
} from './ReactWorkTags';
import {
 LayoutStatic as LayoutStaticEffect,
 Passive as PassiveEffect,
Expand DownExpand Up@@ -345,6 +353,38 @@ function checkDepsAreArrayDev(deps: mixed): void {
 }
}

let didWarnAboutRenderUpdateOnMount;
if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 didWarnAboutRenderUpdateOnMount = new Set<string>();
 }
}

function warnAboutRenderUpdateOnMountInDEV(fiber: Fiber) {
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 switch (fiber.tag) {
 case FunctionComponent:
 case ForwardRef:
 case SimpleMemoComponent: {
 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 // Dedupe by the rendering component because it's the one that needs to be fixed.
 // Ignore multiple to prevent spamming console.
 if (!didWarnAboutRenderUpdateOnMount.has(componentName)) {
 didWarnAboutRenderUpdateOnMount.add(componentName);
 console.error(
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render',
 );
 }
 }
 }
 }
 }
}

function warnOnHookMismatchInDev(currentHookName: HookType): void {
 if (__DEV__) {
 const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
Expand DownExpand Up@@ -3583,6 +3623,13 @@ function dispatchReducerAction<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
 if (root !== null) {
Expand DownExpand Up@@ -3643,6 +3690,13 @@ function dispatchSetStateInternal<S, A>(

 if (isRenderPhaseUpdate(fiber)) {
 enqueueRenderPhaseUpdate(queue, update);
 if (__DEV__) {
 if (disableSetStateInRenderOnMount) {
 if (fiber.alternate === null) {
 warnAboutRenderUpdateOnMountInDEV(fiber);
 }
 }
 }
 } else {
 const alternate = fiber.alternate;
 if (
Expand Down

9 changes: 9 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1125,6 +1125,15 @@ describe('ReactAsyncActions', () => {

 const root = ReactNoop.createRoot();
 await act(() => root.render(<App />));
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog([
 'Render phase update count from 1 to 2',
 'Count: 1',
Expand Down

20 changes: 20 additions & 0 deletions
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ let Activity;
let assertLog;
let waitForPaint;
let textCache;
let assertConsoleErrorDev;

describe('ReactDeferredValue', () => {
 beforeEach(() => {
Expand All@@ -39,6 +40,7 @@ describe('ReactDeferredValue', () => {
 const InternalTestUtils = require('internal-test-utils');
 assertLog = InternalTestUtils.assertLog;
 waitForPaint = InternalTestUtils.waitForPaint;
 assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

 textCache = new Map();
 });
Expand DownExpand Up@@ -262,6 +264,15 @@ describe('ReactDeferredValue', () => {
 await act(() => {
 root.render(<App value={1} />);
 });
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 assertLog(['Original: 1', 'Deferred: 1']);

 // If it's an urgent update, the value is deferred
Expand DownExpand Up@@ -328,6 +339,15 @@ describe('ReactDeferredValue', () => {
 await act(async () => {
 root.render(<App value={1} />);
 await waitForPaint(['Original: 1', 'Deferred: 1']);
 if (gate('disableSetStateInRenderOnMount')) {
 assertConsoleErrorDev([
 'A component called setState during the initial render. ' +
 'This is deprecated, pass the initial value to useState instead. ' +
 'To locate the bad setState() call, follow the stack trace ' +
 'as described in https://react.dev/link/setstate-in-render\n' +
 ' in App (at **)',
 ]);
 }
 expect(root).toMatchRenderedOutput(
 <div>
 <div>Original: 1</div>
Expand Down
Loading