From c337aaba7f0330ea60b448177ff62e681a76c2c9 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 18 May 2022 21:22:56 +0200
Subject: [PATCH 01/11] bigint-tests

---
 packages/react-dom/src/__tests__/ReactDOMFiber-test.js | 10 ++++++++++
 .../react-dom/src/__tests__/ReactDOMFizzServer-test.js | 10 ++++++++++
 .../__tests__/ReactDOMServerIntegrationBasic-test.js   |  6 ++++++
 .../src/__tests__/ReactMultiChildText-test.js          |  3 +++
 .../src/__tests__/ReactTopLevelText-test.js            |  7 +++++++
 packages/react/src/__tests__/ReactChildren-test.js     |  5 ++++-
 6 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index 94172ab77b237..2000ed76e03c8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -60,6 +60,16 @@ describe('ReactDOMFiber', () => {
     expect(container.textContent).toEqual('10');
   });
 
+  it('should render bigints as children', async () => {
+    const Box = ({value}) => <div>{value}</div>;
+
+    await act(async () => {
+      root.render(<Box value={10n} />);
+    });
+
+    expect(container.textContent).toEqual('10');
+  });
+
   it('should call an effect after mount/update (replacing render callback pattern)', async () => {
     function Component() {
       React.useEffect(() => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 5a796c5446f06..d05585bc2b222 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3373,6 +3373,16 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  it('Supports bigint', async () => {
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <div>{10n}</div>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>10</div>);
+  });
+
   it('Supports custom abort reasons with a string', async () => {
     function App() {
       return (
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
index 5589e5dc3a220..6323fe9b60c02 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
@@ -72,6 +72,12 @@ describe('ReactDOMServerIntegration', () => {
       expect(e.nodeValue).toMatch('42');
     });
 
+    itRenders('a bigint', async render => {
+      const e = await render(42n);
+      expect(e.nodeType).toBe(3);
+      expect(e.nodeValue).toMatch('42');
+    });
+
     itRenders('an array with one child', async render => {
       const e = await render([<div key={1}>text1</div>]);
       const parent = e.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index 450d0383eb0fc..b1fff66bf94b9 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -58,6 +58,7 @@ const expectChildren = function (container, children) {
           continue;
         }
         textNode = outerNode.childNodes[mountIndex];
+        expect(textNode != null).toBe(true);
         expect(textNode.nodeType).toBe(3);
         expect(textNode.data).toBe(child);
         mountIndex++;
@@ -89,6 +90,7 @@ describe('ReactMultiChildText', () => {
         true, [],
         0, '0',
         1.2, '1.2',
+        10n, '10',
         '', [],
         'foo', 'foo',
 
@@ -99,6 +101,7 @@ describe('ReactMultiChildText', () => {
         [true], [],
         [0], ['0'],
         [1.2], ['1.2'],
+        [10n], ['10'],
         [''], [],
         ['foo'], ['foo'],
         [<div />], [<div />],
diff --git a/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js b/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
index 30a3fa093b4ab..b1d8dd5e01082 100644
--- a/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
@@ -39,4 +39,11 @@ describe('ReactTopLevelText', () => {
     await waitForAll([]);
     expect(ReactNoop).toMatchRenderedOutput('10');
   });
+
+  it('should render a component returning bigints directly from render', async () => {
+    const Text = ({value}) => value;
+    ReactNoop.render(<Text value={10n} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('10');
+  });
 });
diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
index 016e4089d8d3a..deaaf9f856987 100644
--- a/packages/react/src/__tests__/ReactChildren-test.js
+++ b/packages/react/src/__tests__/ReactChildren-test.js
@@ -183,11 +183,12 @@ describe('ReactChildren', () => {
         {false}
         {null}
         {undefined}
+        {9n}
       </div>
     );
 
     function assertCalls() {
-      expect(callback).toHaveBeenCalledTimes(9);
+      expect(callback).toHaveBeenCalledTimes(10);
       expect(callback).toHaveBeenCalledWith(div, 0);
       expect(callback).toHaveBeenCalledWith(span, 1);
       expect(callback).toHaveBeenCalledWith(a, 2);
@@ -197,6 +198,7 @@ describe('ReactChildren', () => {
       expect(callback).toHaveBeenCalledWith(null, 6);
       expect(callback).toHaveBeenCalledWith(null, 7);
       expect(callback).toHaveBeenCalledWith(null, 8);
+      expect(callback).toHaveBeenCalledWith(9n, 9);
       callback.mockClear();
     }
 
@@ -215,6 +217,7 @@ describe('ReactChildren', () => {
       <a key=".2:$aNode" />,
       'string',
       1234,
+      9n,
     ]);
   });
 

From 6b9174ffab33b439122d0b7e9f9172b66924719f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 11:53:08 +0100
Subject: [PATCH 02/11] f test

---
 .../src/__tests__/ReactDOMServerIntegrationInput-test.js   | 5 +++++
 .../src/__tests__/ReactDOMServerIntegrationSelect-test.js  | 6 ++++--
 .../__tests__/ReactDOMServerIntegrationTextarea-test.js    | 7 ++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
index 4abf637a53713..7066aea04baf7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
@@ -46,6 +46,11 @@ desc('ReactDOMServerIntegrationInput', () => {
     expect(e.value).toBe('foo');
   });
 
+  itRenders('an input with a bigint value and an onChange', async render => {
+    const e = await render(<input value={5n} onChange={() => {}} />);
+    expect(e.value).toBe('5');
+  });
+
   itRenders('an input with a value and readOnly', async render => {
     const e = await render(<input value="foo" readOnly={true} />);
     expect(e.value).toBe('foo');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 8bf3c7c3d20da..e268b9bab59f6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -218,11 +218,13 @@ describe('ReactDOMServerIntegrationSelect', () => {
   itRenders('a select option with flattened children', async render => {
     const e = await render(
       <select value="bar" readOnly={true}>
-        <option value="bar">A {'B'}</option>
+        <option value="bar">
+          A {'B'} {5n}
+        </option>
       </select>,
     );
     const option = e.options[0];
-    expect(option.textContent).toBe('A B');
+    expect(option.textContent).toBe('A B 5');
     expect(option.value).toBe('bar');
     expect(option.selected).toBe(true);
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
index ff69355812d3c..9ce04840dbb0f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -47,12 +47,17 @@ describe('ReactDOMServerIntegrationTextarea', () => {
     expect(e.value).toBe('foo');
   });
 
+  itRenders('a textarea with a bigint value and an onChange', async render => {
+    const e = await render(<textarea value={5n} onChange={() => {}} />);
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.value).toBe('5');
+  });
+
   itRenders('a textarea with a value of undefined', async render => {
     const e = await render(<textarea value={undefined} />);
     expect(e.getAttribute('value')).toBe(null);
     expect(e.value).toBe('');
   });
-
   itRenders('a textarea with a value and readOnly', async render => {
     const e = await render(<textarea value="foo" readOnly={true} />);
     // textarea DOM elements don't have a value **attribute**, the text is

From 2217076ff8d0f3ea821a8ff8a15d0ef2da68f931 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 18 May 2022 21:23:31 +0200
Subject: [PATCH 03/11] bigint-render-impl

---
 .../src/client/ReactDOMComponent.js              | 16 ++++++++++++----
 .../src/server/ReactFizzConfigDOM.js             |  3 ++-
 .../src/server/escapeTextForBrowser.js           |  6 +++++-
 .../react-noop-renderer/src/createReactNoop.js   | 13 +++++++++++--
 packages/react-reconciler/src/ReactChildFiber.js | 16 ++++++++++++----
 packages/react-server/src/ReactFizzServer.js     |  2 +-
 packages/react/src/ReactChildren.js              |  1 +
 7 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index cc773dea4de36..3353823559065 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -326,7 +326,7 @@ function normalizeMarkupForTextOrAttribute(markup: mixed): string {
 
 export function checkForUnmatchedText(
   serverText: string,
-  clientText: string | number,
+  clientText: string | number | bigint,
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
 ) {
@@ -397,12 +397,14 @@ function setProp(
         if (canSetTextContent) {
           setTextContent(domElement, value);
         }
-      } else if (typeof value === 'number') {
+      } else if (typeof value === 'number' || typeof value === 'bigint') {
         if (__DEV__) {
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           validateTextNesting('' + value, tag);
         }
         const canSetTextContent = tag !== 'body';
         if (canSetTextContent) {
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           setTextContent(domElement, '' + value);
         }
       }
@@ -955,7 +957,8 @@ function setPropOnCustomElement(
     case 'children': {
       if (typeof value === 'string') {
         setTextContent(domElement, value);
-      } else if (typeof value === 'number') {
+      } else if (typeof value === 'number' || typeof value === 'bigint') {
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         setTextContent(domElement, '' + value);
       }
       break;
@@ -2817,7 +2820,12 @@ export function diffHydratedProperties(
   // even listeners these nodes might be wired up to.
   // TODO: Warn if there is more than a single textNode as a child.
   // TODO: Should we use domElement.firstChild.nodeValue to compare?
-  if (typeof children === 'string' || typeof children === 'number') {
+  if (
+    typeof children === 'string' ||
+    typeof children === 'number' ||
+    typeof children === 'bigint'
+  ) {
+    // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
     if (domElement.textContent !== '' + children) {
       if (props.suppressHydrationWarning !== true) {
         checkForUnmatchedText(
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 411e81180d9cf..d839e1d53875f 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1626,7 +1626,8 @@ function flattenOptionChildren(children: mixed): string {
       if (
         !didWarnInvalidOptionChildren &&
         typeof child !== 'string' &&
-        typeof child !== 'number'
+        typeof child !== 'number' &&
+        typeof child !== 'bigint'
       ) {
         didWarnInvalidOptionChildren = true;
         console.error(
diff --git a/packages/react-dom-bindings/src/server/escapeTextForBrowser.js b/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
index 842d1b1328fdb..4514bf66831d7 100644
--- a/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
+++ b/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
@@ -106,7 +106,11 @@ function escapeHtml(string: string) {
  * @return {string} An escaped string.
  */
 function escapeTextForBrowser(text: string | number | boolean): string {
-  if (typeof text === 'boolean' || typeof text === 'number') {
+  if (
+    typeof text === 'boolean' ||
+    typeof text === 'number' ||
+    typeof text === 'bigint'
+  ) {
     // this shortcircuit helps perf for types that we know will never have
     // special characters, especially given that this function is used often
     // for numeric dom ids.
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 77c386457e1d2..0470672f4b5f3 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -272,7 +272,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       throw new Error('Error in host config.');
     }
     return (
-      typeof props.children === 'string' || typeof props.children === 'number'
+      typeof props.children === 'string' ||
+      typeof props.children === 'number' ||
+      typeof props.children === 'bigint'
     );
   }
 
@@ -828,7 +830,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         return childToJSX(child[0], null);
       }
       const children = child.map(c => childToJSX(c, null));
-      if (children.every(c => typeof c === 'string' || typeof c === 'number')) {
+      if (
+        children.every(
+          c =>
+            typeof c === 'string' ||
+            typeof c === 'number' ||
+            typeof c === 'bigint',
+        )
+      ) {
         return children.join('');
       }
       return children;
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
index 118162ae36269..9886a487a6039 100644
--- a/packages/react-reconciler/src/ReactChildFiber.js
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -665,12 +665,14 @@ function createChildReconciler(
   ): Fiber | null {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
       const created = createFiberFromText(
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         '' + newChild,
         returnFiber.mode,
         lanes,
@@ -785,7 +787,8 @@ function createChildReconciler(
 
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
@@ -796,6 +799,7 @@ function createChildReconciler(
       return updateTextNode(
         returnFiber,
         oldFiber,
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         '' + newChild,
         lanes,
         debugInfo,
@@ -908,7 +912,8 @@ function createChildReconciler(
   ): Fiber | null {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys, so we neither have to check the old nor
       // new node for the key. If both are text nodes, they match.
@@ -916,6 +921,7 @@ function createChildReconciler(
       return updateTextNode(
         returnFiber,
         matchedFiber,
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         '' + newChild,
         lanes,
         debugInfo,
@@ -1723,12 +1729,14 @@ function createChildReconciler(
 
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
           currentFirstChild,
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           '' + newChild,
           lanes,
         ),
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 7930aad88216f..d12b0e5edd43e 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -2364,7 +2364,7 @@ function renderNodeDestructive(
     return;
   }
 
-  if (typeof node === 'number') {
+  if (typeof node === 'number' || typeof node === 'bigint') {
     const segment = task.blockedSegment;
     if (segment === null) {
       // We assume a text node doesn't have a representation in the replay set,
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 8b9219b9fb1f0..809239dd3fc79 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -165,6 +165,7 @@ function mapIntoArray(
     switch (type) {
       case 'string':
       case 'number':
+      case 'bigint':
         invokeCallback = true;
         break;
       case 'object':

From 1c1b6aa39721ab3cafb56fd5f889b660e5ccf53c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sat, 17 Feb 2024 16:20:37 +0100
Subject: [PATCH 04/11] Add case to devtools fixture

---
 .../src/app/InspectableElements/UnserializableProps.js      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
index d04783b6a7e33..906683c0975fb 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
@@ -58,5 +58,9 @@ export default function UnserializableProps(): React.Node {
 }
 
 function ChildComponent(props: any) {
-  return null;
+  return (
+    <>
+      <div>{props.bigInt}</div>
+    </>
+  );
 }

From 5ffd3fc99f59997a32770f84cf2a3ee55a88ad9d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 11:41:06 +0100
Subject: [PATCH 05/11] bigint tests for input values

---
 .../src/__tests__/ReactDOMInput-test.js       | 28 +++++++++++++++++++
 .../src/__tests__/ReactDOMOption-test.js      |  6 ++++
 .../src/__tests__/ReactDOMTextarea-test.js    | 12 ++++++++
 3 files changed, 46 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 7d1ed0e21d471..44a60c28731b6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -657,6 +657,16 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
+  it('should render bigint defaultValue for SSR', () => {
+    const markup = ReactDOMServer.renderToString(
+      <input type="text" defaultValue={5n} />,
+    );
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('5');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
   it('should render value for SSR', () => {
     const element = <input type="text" value="1" onChange={() => {}} />;
     const markup = ReactDOMServer.renderToString(element);
@@ -666,6 +676,15 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
+  it('should render bigint value for SSR', () => {
+    const element = <input type="text" value={5n} onChange={() => {}} />;
+    const markup = ReactDOMServer.renderToString(element);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('5');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
   it('should render name attribute if it is supplied', async () => {
     await act(() => {
       root.render(<input type="text" name="name" />);
@@ -830,6 +849,15 @@ describe('ReactDOMInput', () => {
     expect(node.value).toBe('0');
   });
 
+  it('should display `value` of bigint 5', async () => {
+    await act(() => {
+      root.render(<input type="text" value={5n} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('5');
+  });
+
   it('should allow setting `value` to `true`', async () => {
     await act(() => {
       root.render(<input type="text" value="yolo" onChange={emptyFunction} />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index abeae80125bdf..216749cb0e874 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -172,6 +172,12 @@ describe('ReactDOMOption', () => {
     expect(node.value).toBe('hello');
   });
 
+  it('should support bigint values', () => {
+    const node = ReactTestUtils.renderIntoDocument(<option>{5n}</option>);
+    expect(node.innerHTML).toBe('5');
+    expect(node.value).toBe('5');
+  });
+
   it('should be able to use dangerouslySetInnerHTML on option', () => {
     const stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} />;
     let node;
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 3d21ca64e399e..7b818fdde2fc3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -80,6 +80,18 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toBe('0');
   });
 
+  it('should display `defaultValue` of bigint 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue={0n} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('0');
+  });
+
   it('should display "false" for `defaultValue` of `false`', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);

From 46e5e9248b9a559b9fabb1cdb321d2d0e83aa73b Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 11:52:52 +0100
Subject: [PATCH 06/11] bigint impl for input values

---
 packages/react-dom-bindings/src/client/ReactDOMOption.js    | 6 +++++-
 .../react-dom-bindings/src/client/ReactFiberConfigDOM.js    | 1 +
 packages/react-dom-bindings/src/client/ToStringValue.js     | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMOption.js b/packages/react-dom-bindings/src/client/ReactDOMOption.js
index 4f7d3105a8ef5..ae7a7ba999c06 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMOption.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMOption.js
@@ -26,7 +26,11 @@ export function validateOptionProps(element: Element, props: Object) {
           if (child == null) {
             return;
           }
-          if (typeof child === 'string' || typeof child === 'number') {
+          if (
+            typeof child === 'string' ||
+            typeof child === 'number' ||
+            typeof child === 'bigint'
+          ) {
             return;
           }
           if (!didWarnInvalidChild) {
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 9e2c5e41c062f..841f39b9b0380 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -548,6 +548,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
     type === 'noscript' ||
     typeof props.children === 'string' ||
     typeof props.children === 'number' ||
+    typeof props.children === 'bigint' ||
     (typeof props.dangerouslySetInnerHTML === 'object' &&
       props.dangerouslySetInnerHTML !== null &&
       props.dangerouslySetInnerHTML.__html != null)
diff --git a/packages/react-dom-bindings/src/client/ToStringValue.js b/packages/react-dom-bindings/src/client/ToStringValue.js
index 74a9b5b4bca7f..f6ebd55e23702 100644
--- a/packages/react-dom-bindings/src/client/ToStringValue.js
+++ b/packages/react-dom-bindings/src/client/ToStringValue.js
@@ -12,6 +12,7 @@ import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
 export opaque type ToStringValue =
   | boolean
   | number
+  | bigint
   | Object
   | string
   | null
@@ -30,6 +31,7 @@ export function getToStringValue(value: mixed): ToStringValue {
   switch (typeof value) {
     case 'boolean':
     case 'number':
+    case 'bigint':
     case 'string':
     case 'undefined':
       return value;

From aa568500452ec8cee3b015f743d608e3e4ba7260 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 13:54:14 +0100
Subject: [PATCH 07/11] bigint test for title children

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 114 +++++++++++++++++-
 1 file changed, 112 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d05585bc2b222..07c6dfa61d4af 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -5652,6 +5652,60 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
     });
 
+    it('should accept a single number child', async () => {
+      // a Single number child
+      function App() {
+        return (
+          <head>
+            <title>4</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
+    });
+
+    it('should accept a single bigint child', async () => {
+      // a Single number child
+      function App() {
+        return (
+          <head>
+            <title>5n</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(document.head)).toEqual(<title>5n</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(document.head)).toEqual(<title>5n</title>);
+    });
+
     it('should accept children array of length 1 containing a string', async () => {
       // a Single string child
       function App() {
@@ -5694,7 +5748,7 @@ describe('ReactDOMFizzServer', () => {
           pipe(writable);
         });
       }).toErrorDev([
-        'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+        'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
       ]);
 
       if (gate(flags => flags.enableFloat)) {
@@ -5754,7 +5808,63 @@ describe('ReactDOMFizzServer', () => {
             pipe(writable);
           });
         }).toErrorDev([
-          'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+        ]);
+      } else {
+        await expect(async () => {
+          await act(() => {
+            const {pipe} = renderToPipeableStream(<App />);
+            pipe(writable);
+          });
+        }).toErrorDev([
+          'A title element received a React element for children. In the browser title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering',
+        ]);
+      }
+
+      if (gate(flags => flags.enableFloat)) {
+        // object titles are toStringed when float is on
+        expect(getVisibleChildren(document.head)).toEqual(
+          <title>{'[object Object]'}</title>,
+        );
+      } else {
+        expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
+      }
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(document.head, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      if (gate(flags => flags.enableFloat)) {
+        // object titles are toStringed when float is on
+        expect(getVisibleChildren(document.head)).toEqual(
+          <title>{'[object Object]'}</title>,
+        );
+      } else {
+        expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
+      }
+    });
+
+    it('should warn in dev if you pass an object that does not implement toString as a child to <title>', async () => {
+      function App() {
+        return (
+          <head>
+            <title>{{}}</title>
+          </head>
+        );
+      }
+
+      if (gate(flags => flags.enableFloat)) {
+        await expect(async () => {
+          await act(() => {
+            const {pipe} = renderToPipeableStream(<App />);
+            pipe(writable);
+          });
+        }).toErrorDev([
+          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title> is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
         ]);
       } else {
         await expect(async () => {

From 8075e417d918b961d7299435141615574c335b57 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 13:54:27 +0100
Subject: [PATCH 08/11] bigint impl for title children

---
 .../src/server/ReactFizzConfigDOM.js                | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index d839e1d53875f..0a66ad21b98d8 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2961,7 +2961,7 @@ function pushTitle(
 
       if (Array.isArray(children) && children.length > 1) {
         console.error(
-          'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an Array with length %s instead.' +
+          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length %s instead.' +
             ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value' +
             ' which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes.' +
             ' For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +
@@ -2972,7 +2972,7 @@ function pushTitle(
         const childType =
           typeof child === 'function' ? 'a Function' : 'a Sybmol';
         console.error(
-          'React expect children of <title> tags to be a string, number, or object with a novel `toString` method but found %s instead.' +
+          'React expect children of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found %s instead.' +
             ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +
             ' tags to a single string value.',
           childType,
@@ -2980,14 +2980,14 @@ function pushTitle(
       } else if (child && child.toString === {}.toString) {
         if (child.$$typeof != null) {
           console.error(
-            'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that appears to be' +
+            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be' +
               ' a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to' +
               ' be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is' +
               ' a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
           );
         } else {
           console.error(
-            'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that does not implement' +
+            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement' +
               ' a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags' +
               ' to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title>' +
               ' is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
@@ -3124,10 +3124,11 @@ function pushStartTitle(
     } else if (
       childForValidation != null &&
       typeof childForValidation !== 'string' &&
-      typeof childForValidation !== 'number'
+      typeof childForValidation !== 'number' &&
+      typeof childForValidation !== 'bigint'
     ) {
       console.error(
-        'A title element received a value that was not a string or number for children. ' +
+        'A title element received a value that was not a string or number or bigint for children. ' +
           'In the browser title Elements can only have Text Nodes as children. If ' +
           'the children being rendered output more than a single text node in aggregate the browser ' +
           'will display markup and comments as text in the title and hydration will likely fail and ' +

From 10112693760f5550f8fc17452a6d252a943e47bb Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 14:58:12 +0100
Subject: [PATCH 09/11] Add feature flag for experimental release channel

---
 .../src/client/ReactDOMComponent.js           | 13 +++++--
 .../src/client/ReactDOMOption.js              |  3 +-
 .../src/client/ReactFiberConfigDOM.js         |  3 +-
 .../src/client/ToStringValue.js               |  8 ++++-
 .../src/server/ReactFizzConfigDOM.js          | 22 ++++++++----
 .../src/server/escapeTextForBrowser.js        |  3 +-
 .../src/__tests__/ReactDOMFiber-test.js       |  1 +
 .../src/__tests__/ReactDOMFizzServer-test.js  | 14 ++++++--
 .../src/__tests__/ReactDOMInput-test.js       |  3 ++
 .../src/__tests__/ReactDOMOption-test.js      |  1 +
 .../ReactDOMServerIntegrationBasic-test.js    |  8 +++--
 .../ReactDOMServerIntegrationInput-test.js    | 12 +++++--
 .../ReactDOMServerIntegrationSelect-test.js   |  4 ++-
 .../ReactDOMServerIntegrationTextarea-test.js | 11 ++++--
 .../src/__tests__/ReactDOMTextarea-test.js    |  1 +
 .../src/__tests__/ReactMultiChildText-test.js | 11 ++++--
 .../react-reconciler/src/ReactChildFiber.js   |  9 ++---
 .../src/__tests__/ReactTopLevelText-test.js   |  1 +
 packages/react-server/src/ReactFizzServer.js  |  6 +++-
 packages/react/src/ReactChildren.js           |  7 +++-
 .../react/src/__tests__/ReactChildren-test.js | 36 +++++++++++++------
 packages/shared/ReactFeatureFlags.js          |  2 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  2 ++
 .../forks/ReactFeatureFlags.native-oss.js     |  2 ++
 .../forks/ReactFeatureFlags.test-renderer.js  |  2 ++
 .../ReactFeatureFlags.test-renderer.native.js |  2 ++
 .../ReactFeatureFlags.test-renderer.www.js    |  2 ++
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 28 files changed, 148 insertions(+), 42 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 3353823559065..24462c1d2bb5a 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -66,6 +66,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import sanitizeURL from '../shared/sanitizeURL';
 
 import {
+  enableBigIntSupport,
   enableCustomElementPropertySupport,
   enableClientRenderFallbackOnTextMismatch,
   enableFormActions,
@@ -397,7 +398,10 @@ function setProp(
         if (canSetTextContent) {
           setTextContent(domElement, value);
         }
-      } else if (typeof value === 'number' || typeof value === 'bigint') {
+      } else if (
+        typeof value === 'number' ||
+        (enableBigIntSupport && typeof value === 'bigint')
+      ) {
         if (__DEV__) {
           // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           validateTextNesting('' + value, tag);
@@ -957,7 +961,10 @@ function setPropOnCustomElement(
     case 'children': {
       if (typeof value === 'string') {
         setTextContent(domElement, value);
-      } else if (typeof value === 'number' || typeof value === 'bigint') {
+      } else if (
+        typeof value === 'number' ||
+        (enableBigIntSupport && typeof value === 'bigint')
+      ) {
         // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         setTextContent(domElement, '' + value);
       }
@@ -2823,7 +2830,7 @@ export function diffHydratedProperties(
   if (
     typeof children === 'string' ||
     typeof children === 'number' ||
-    typeof children === 'bigint'
+    (enableBigIntSupport && typeof children === 'bigint')
   ) {
     // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
     if (domElement.textContent !== '' + children) {
diff --git a/packages/react-dom-bindings/src/client/ReactDOMOption.js b/packages/react-dom-bindings/src/client/ReactDOMOption.js
index ae7a7ba999c06..10d04bd6f7eb2 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMOption.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMOption.js
@@ -8,6 +8,7 @@
  */
 
 import {Children} from 'react';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 
 let didWarnSelectedSetOnOption = false;
 let didWarnInvalidChild = false;
@@ -29,7 +30,7 @@ export function validateOptionProps(element: Element, props: Object) {
           if (
             typeof child === 'string' ||
             typeof child === 'number' ||
-            typeof child === 'bigint'
+            (enableBigIntSupport && typeof child === 'bigint')
           ) {
             return;
           }
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 841f39b9b0380..973a9fb931246 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -89,6 +89,7 @@ import {
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
+  enableBigIntSupport,
   enableCreateEventHandleAPI,
   enableScopeAPI,
   enableFloat,
@@ -548,7 +549,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
     type === 'noscript' ||
     typeof props.children === 'string' ||
     typeof props.children === 'number' ||
-    typeof props.children === 'bigint' ||
+    (enableBigIntSupport && typeof props.children === 'bigint') ||
     (typeof props.dangerouslySetInnerHTML === 'object' &&
       props.dangerouslySetInnerHTML !== null &&
       props.dangerouslySetInnerHTML.__html != null)
diff --git a/packages/react-dom-bindings/src/client/ToStringValue.js b/packages/react-dom-bindings/src/client/ToStringValue.js
index f6ebd55e23702..e1fc51b775dd4 100644
--- a/packages/react-dom-bindings/src/client/ToStringValue.js
+++ b/packages/react-dom-bindings/src/client/ToStringValue.js
@@ -8,6 +8,7 @@
  */
 
 import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 
 export opaque type ToStringValue =
   | boolean
@@ -29,9 +30,14 @@ export function toString(value: ToStringValue): string {
 
 export function getToStringValue(value: mixed): ToStringValue {
   switch (typeof value) {
+    case 'bigint':
+      if (!enableBigIntSupport) {
+        // bigint is assigned as empty string
+        return '';
+      }
+    // fallthrough for BigInt support
     case 'boolean':
     case 'number':
-    case 'bigint':
     case 'string':
     case 'undefined':
       return value;
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 0a66ad21b98d8..a469b5587d79a 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -28,6 +28,7 @@ import {
 import {Children} from 'react';
 
 import {
+  enableBigIntSupport,
   enableFilterEmptyStringAttributesDOM,
   enableCustomElementPropertySupport,
   enableFloat,
@@ -1627,7 +1628,8 @@ function flattenOptionChildren(children: mixed): string {
         !didWarnInvalidOptionChildren &&
         typeof child !== 'string' &&
         typeof child !== 'number' &&
-        typeof child !== 'bigint'
+        ((enableBigIntSupport && typeof child !== 'bigint') ||
+          !enableBigIntSupport)
       ) {
         didWarnInvalidOptionChildren = true;
         console.error(
@@ -2961,36 +2963,40 @@ function pushTitle(
 
       if (Array.isArray(children) && children.length > 1) {
         console.error(
-          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length %s instead.' +
+          'React expects the `children` prop of <title> tags to be a string, number%s, or object with a novel `toString` method but found an Array with length %s instead.' +
             ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value' +
             ' which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes.' +
             ' For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +
             ' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+          enableBigIntSupport ? ', bigint' : '',
           children.length,
         );
       } else if (typeof child === 'function' || typeof child === 'symbol') {
         const childType =
           typeof child === 'function' ? 'a Function' : 'a Sybmol';
         console.error(
-          'React expect children of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found %s instead.' +
+          'React expect children of <title> tags to be a string, number%s, or object with a novel `toString` method but found %s instead.' +
             ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +
             ' tags to a single string value.',
+          enableBigIntSupport ? ', bigint' : '',
           childType,
         );
       } else if (child && child.toString === {}.toString) {
         if (child.$$typeof != null) {
           console.error(
-            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be' +
+            'React expects the `children` prop of <title> tags to be a string, number%s, or object with a novel `toString` method but found an object that appears to be' +
               ' a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to' +
               ' be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is' +
               ' a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+            enableBigIntSupport ? ', bigint' : '',
           );
         } else {
           console.error(
-            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement' +
+            'React expects the `children` prop of <title> tags to be a string, number%s, or object with a novel `toString` method but found an object that does not implement' +
               ' a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags' +
               ' to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title>' +
               ' is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
+            enableBigIntSupport ? ', bigint' : '',
           );
         }
       }
@@ -3125,14 +3131,16 @@ function pushStartTitle(
       childForValidation != null &&
       typeof childForValidation !== 'string' &&
       typeof childForValidation !== 'number' &&
-      typeof childForValidation !== 'bigint'
+      ((enableBigIntSupport && typeof childForValidation !== 'bigint') ||
+        !enableBigIntSupport)
     ) {
       console.error(
-        'A title element received a value that was not a string or number or bigint for children. ' +
+        'A title element received a value that was not a string or number%s for children. ' +
           'In the browser title Elements can only have Text Nodes as children. If ' +
           'the children being rendered output more than a single text node in aggregate the browser ' +
           'will display markup and comments as text in the title and hydration will likely fail and ' +
           'fall back to client rendering',
+        enableBigIntSupport ? ' or bigint' : '',
       );
     }
   }
diff --git a/packages/react-dom-bindings/src/server/escapeTextForBrowser.js b/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
index 4514bf66831d7..6fd43c01c5f69 100644
--- a/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
+++ b/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
@@ -39,6 +39,7 @@
  */
 
 import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 
 const matchHtmlRegExp = /["'&<>]/;
 
@@ -109,7 +110,7 @@ function escapeTextForBrowser(text: string | number | boolean): string {
   if (
     typeof text === 'boolean' ||
     typeof text === 'number' ||
-    typeof text === 'bigint'
+    (enableBigIntSupport && typeof text === 'bigint')
   ) {
     // this shortcircuit helps perf for types that we know will never have
     // special characters, especially given that this function is used often
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index 2000ed76e03c8..2882cab2e9991 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -60,6 +60,7 @@ describe('ReactDOMFiber', () => {
     expect(container.textContent).toEqual('10');
   });
 
+  // @gate enableBigIntSupport
   it('should render bigints as children', async () => {
     const Box = ({value}) => <div>{value}</div>;
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 07c6dfa61d4af..126988076d198 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3373,6 +3373,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate enableBigIntSupport
   it('Supports bigint', async () => {
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -5679,6 +5680,7 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
     });
 
+    // @gate enableBigIntSupport
     it('should accept a single bigint child', async () => {
       // a Single number child
       function App() {
@@ -5748,7 +5750,9 @@ describe('ReactDOMFizzServer', () => {
           pipe(writable);
         });
       }).toErrorDev([
-        'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+        'React expects the `children` prop of <title> tags to be a string, number' +
+          gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +
+          ', or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
       ]);
 
       if (gate(flags => flags.enableFloat)) {
@@ -5808,7 +5812,9 @@ describe('ReactDOMFizzServer', () => {
             pipe(writable);
           });
         }).toErrorDev([
-          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+          'React expects the `children` prop of <title> tags to be a string, number' +
+            gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +
+            ', or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
         ]);
       } else {
         await expect(async () => {
@@ -5864,7 +5870,9 @@ describe('ReactDOMFizzServer', () => {
             pipe(writable);
           });
         }).toErrorDev([
-          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title> is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
+          'React expects the `children` prop of <title> tags to be a string, number' +
+            gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +
+            ', or object with a novel `toString` method but found an object that does not implement a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title> is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
         ]);
       } else {
         await expect(async () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 44a60c28731b6..4936dfcbf9f95 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -657,6 +657,7 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
+  // @gate enableBigIntSupport
   it('should render bigint defaultValue for SSR', () => {
     const markup = ReactDOMServer.renderToString(
       <input type="text" defaultValue={5n} />,
@@ -676,6 +677,7 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
+  // @gate enableBigIntSupport
   it('should render bigint value for SSR', () => {
     const element = <input type="text" value={5n} onChange={() => {}} />;
     const markup = ReactDOMServer.renderToString(element);
@@ -849,6 +851,7 @@ describe('ReactDOMInput', () => {
     expect(node.value).toBe('0');
   });
 
+  // @gate enableBigIntSupport
   it('should display `value` of bigint 5', async () => {
     await act(() => {
       root.render(<input type="text" value={5n} onChange={emptyFunction} />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index 216749cb0e874..a75ce875001f6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -172,6 +172,7 @@ describe('ReactDOMOption', () => {
     expect(node.value).toBe('hello');
   });
 
+  // @gate enableBigIntSupport
   it('should support bigint values', () => {
     const node = ReactTestUtils.renderIntoDocument(<option>{5n}</option>);
     expect(node.innerHTML).toBe('5');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
index 6323fe9b60c02..266bae3d5eeaa 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
@@ -74,8 +74,12 @@ describe('ReactDOMServerIntegration', () => {
 
     itRenders('a bigint', async render => {
       const e = await render(42n);
-      expect(e.nodeType).toBe(3);
-      expect(e.nodeValue).toMatch('42');
+      if (gate(flags => flags.enableBigIntSupport)) {
+        expect(e.nodeType).toBe(3);
+        expect(e.nodeValue).toMatch('42');
+      } else {
+        expect(e).toBe(null);
+      }
     });
 
     itRenders('an array with one child', async render => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
index 7066aea04baf7..3ad7abf91a7df 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
@@ -32,7 +32,8 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+const {resetModules, itRenders, serverRender, streamRender} =
+  ReactDOMServerIntegrationUtils(initModules);
 
 // TODO: Run this in React Fire mode after we figure out the SSR behavior.
 const desc = disableInputAttributeSyncing ? xdescribe : describe;
@@ -47,8 +48,15 @@ desc('ReactDOMServerIntegrationInput', () => {
   });
 
   itRenders('an input with a bigint value and an onChange', async render => {
+    console.log(gate(flags => flags.enableBigIntSupport));
     const e = await render(<input value={5n} onChange={() => {}} />);
-    expect(e.value).toBe('5');
+    expect(e.value).toBe(
+      gate(flags => flags.enableBigIntSupport) ||
+        render === serverRender ||
+        render === streamRender
+        ? '5'
+        : '',
+    );
   });
 
   itRenders('an input with a value and readOnly', async render => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index e268b9bab59f6..13c7f78ea831e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -224,7 +224,9 @@ describe('ReactDOMServerIntegrationSelect', () => {
       </select>,
     );
     const option = e.options[0];
-    expect(option.textContent).toBe('A B 5');
+    expect(option.textContent).toBe(
+      gate(flags => flags.enableBigIntSupport) ? 'A B 5' : 'A B ',
+    );
     expect(option.value).toBe('bar');
     expect(option.selected).toBe(true);
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
index 9ce04840dbb0f..79b5fd840d88a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -30,7 +30,8 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+const {resetModules, itRenders, serverRender, streamRender} =
+  ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegrationTextarea', () => {
   beforeEach(() => {
@@ -50,7 +51,13 @@ describe('ReactDOMServerIntegrationTextarea', () => {
   itRenders('a textarea with a bigint value and an onChange', async render => {
     const e = await render(<textarea value={5n} onChange={() => {}} />);
     expect(e.getAttribute('value')).toBe(null);
-    expect(e.value).toBe('5');
+    expect(e.value).toBe(
+      gate(flags => flags.enableBigIntSupport) ||
+        render === serverRender ||
+        render === streamRender
+        ? '5'
+        : '',
+    );
   });
 
   itRenders('a textarea with a value of undefined', async render => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 7b818fdde2fc3..88c574b4cb2e5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -80,6 +80,7 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toBe('0');
   });
 
+  // @gate enableBigIntSupport
   it('should display `defaultValue` of bigint 0', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index b1fff66bf94b9..7cf2c048c504e 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -90,7 +90,6 @@ describe('ReactMultiChildText', () => {
         true, [],
         0, '0',
         1.2, '1.2',
-        10n, '10',
         '', [],
         'foo', 'foo',
 
@@ -101,7 +100,6 @@ describe('ReactMultiChildText', () => {
         [true], [],
         [0], ['0'],
         [1.2], ['1.2'],
-        [10n], ['10'],
         [''], [],
         ['foo'], ['foo'],
         [<div />], [<div />],
@@ -176,6 +174,15 @@ describe('ReactMultiChildText', () => {
     ]);
   });
 
+  // @gate enableBigIntSupport
+  it('should correctly handle bigint children for render and update', async () => {
+    // prettier-ignore
+    await testAllPermutations([
+      10n, '10',
+      [10n], ['10']
+    ]);
+  });
+
   it('should throw if rendering both HTML and children', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
index 9886a487a6039..41cdf9a02f2ff 100644
--- a/packages/react-reconciler/src/ReactChildFiber.js
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -25,6 +25,7 @@ import {
   Forked,
   PlacementDEV,
 } from './ReactFiberFlags';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -666,7 +667,7 @@ function createChildReconciler(
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
-      typeof newChild === 'bigint'
+      (enableBigIntSupport && typeof newChild === 'bigint')
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
@@ -788,7 +789,7 @@ function createChildReconciler(
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
-      typeof newChild === 'bigint'
+      (enableBigIntSupport && typeof newChild === 'bigint')
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
@@ -913,7 +914,7 @@ function createChildReconciler(
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
-      typeof newChild === 'bigint'
+      (enableBigIntSupport && typeof newChild === 'bigint')
     ) {
       // Text nodes don't have keys, so we neither have to check the old nor
       // new node for the key. If both are text nodes, they match.
@@ -1730,7 +1731,7 @@ function createChildReconciler(
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
-      typeof newChild === 'bigint'
+      (enableBigIntSupport && typeof newChild === 'bigint')
     ) {
       return placeSingleChild(
         reconcileSingleTextNode(
diff --git a/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js b/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
index b1d8dd5e01082..9c5de7bd2ee5f 100644
--- a/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
@@ -40,6 +40,7 @@ describe('ReactTopLevelText', () => {
     expect(ReactNoop).toMatchRenderedOutput('10');
   });
 
+  // @gate enableBigIntSupport
   it('should render a component returning bigints directly from render', async () => {
     const Text = ({value}) => value;
     ReactNoop.render(<Text value={10n} />);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index d12b0e5edd43e..e17b58826fb83 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -139,6 +139,7 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   disableLegacyContext,
   disableModulePatternComponents,
+  enableBigIntSupport,
   enableScopeAPI,
   enableSuspenseAvoidThisFallbackFizz,
   enableFloat,
@@ -2364,7 +2365,10 @@ function renderNodeDestructive(
     return;
   }
 
-  if (typeof node === 'number' || typeof node === 'bigint') {
+  if (
+    typeof node === 'number' ||
+    (enableBigIntSupport && typeof node === 'bigint')
+  ) {
     const segment = task.blockedSegment;
     if (segment === null) {
       // We assume a text node doesn't have a representation in the replay set,
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 809239dd3fc79..d3c155dc8be77 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -16,6 +16,7 @@ import type {
 } from 'shared/ReactTypes';
 
 import isArray from 'shared/isArray';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -163,9 +164,13 @@ function mapIntoArray(
     invokeCallback = true;
   } else {
     switch (type) {
+      case 'bigint':
+        if (!enableBigIntSupport) {
+          break;
+        }
+      // fallthrough for enabled BigInt support
       case 'string':
       case 'number':
-      case 'bigint':
         invokeCallback = true;
         break;
       case 'object':
diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
index deaaf9f856987..532cc3e8ec232 100644
--- a/packages/react/src/__tests__/ReactChildren-test.js
+++ b/packages/react/src/__tests__/ReactChildren-test.js
@@ -188,7 +188,9 @@ describe('ReactChildren', () => {
     );
 
     function assertCalls() {
-      expect(callback).toHaveBeenCalledTimes(10);
+      expect(callback).toHaveBeenCalledTimes(
+        gate(flags => flags.enableBigIntSupport) ? 10 : 9,
+      );
       expect(callback).toHaveBeenCalledWith(div, 0);
       expect(callback).toHaveBeenCalledWith(span, 1);
       expect(callback).toHaveBeenCalledWith(a, 2);
@@ -198,7 +200,11 @@ describe('ReactChildren', () => {
       expect(callback).toHaveBeenCalledWith(null, 6);
       expect(callback).toHaveBeenCalledWith(null, 7);
       expect(callback).toHaveBeenCalledWith(null, 8);
-      expect(callback).toHaveBeenCalledWith(9n, 9);
+      if (gate(flags => flags.enableBigIntSupport)) {
+        expect(callback).toHaveBeenCalledWith(9n, 9);
+      } else {
+        expect(callback).not.toHaveBeenCalledWith(9n, 9);
+      }
       callback.mockClear();
     }
 
@@ -211,14 +217,24 @@ describe('ReactChildren', () => {
       context,
     );
     assertCalls();
-    expect(mappedChildren).toEqual([
-      <div key=".$divNode" />,
-      <span key=".1:0:$spanNode" />,
-      <a key=".2:$aNode" />,
-      'string',
-      1234,
-      9n,
-    ]);
+    expect(mappedChildren).toEqual(
+      gate(flags => flags.enableBigIntSupport)
+        ? [
+            <div key=".$divNode" />,
+            <span key=".1:0:$spanNode" />,
+            <a key=".2:$aNode" />,
+            'string',
+            1234,
+            9n,
+          ]
+        : [
+            <div key=".$divNode" />,
+            <span key=".1:0:$spanNode" />,
+            <a key=".2:$aNode" />,
+            'string',
+            1234,
+          ],
+    );
   });
 
   it('should be called for each child in nested structure', () => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 1655c4eed031e..1423917522c65 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -102,6 +102,8 @@ export const enableCPUSuspense = __EXPERIMENTAL__;
 
 export const enableFloat = true;
 
+export const enableBigIntSupport = __EXPERIMENTAL__;
+
 // Enables unstable_useMemoCache hook, intended as a compilation target for
 // auto-memoization.
 export const enableUseMemoCacheHook = __EXPERIMENTAL__;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 1bf08bdffee0a..acf266c8688b2 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -86,6 +86,8 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
+export const enableBigIntSupport = false;
+
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 703c1b706c113..7622e6a27c1e7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -72,6 +72,8 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
+export const enableBigIntSupport = false;
+
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 7a76a71b2750a..82fa45fe2002e 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -72,6 +72,8 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
+export const enableBigIntSupport = false;
+
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 166fcd587111e..e268f499a25fe 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -71,6 +71,8 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
+export const enableBigIntSupport = false;
+
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableDeferRootSchedulingToMicrotask = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 4a4142a3fc28c..da39b5bbfa3f9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -72,6 +72,8 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
+export const enableBigIntSupport = false;
+
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0b8263ca3edbe..5f639924dc7dc 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -58,6 +58,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCustomElementPropertySupport = true;
 export const enableCPUSuspense = true;
 export const enableFloat = true;
+export const enableBigIntSupport = false;
 export const enableUseMemoCacheHook = true;
 export const enableUseEffectEventHook = true;
 export const enableFilterEmptyStringAttributesDOM = true;

From 111ff2844de4e8e22f9cea13140e9d1f076e0cdb Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 18 Feb 2024 15:47:49 +0100
Subject: [PATCH 10/11] Ungate already passing tests

---
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 1 -
 packages/react-dom/src/__tests__/ReactDOMInput-test.js      | 2 --
 2 files changed, 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 126988076d198..ac7ddfd2f5576 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -5680,7 +5680,6 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
     });
 
-    // @gate enableBigIntSupport
     it('should accept a single bigint child', async () => {
       // a Single number child
       function App() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 4936dfcbf9f95..ad7342f53398d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -657,7 +657,6 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
-  // @gate enableBigIntSupport
   it('should render bigint defaultValue for SSR', () => {
     const markup = ReactDOMServer.renderToString(
       <input type="text" defaultValue={5n} />,
@@ -677,7 +676,6 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
-  // @gate enableBigIntSupport
   it('should render bigint value for SSR', () => {
     const element = <input type="text" value={5n} onChange={() => {}} />;
     const markup = ReactDOMServer.renderToString(element);

From ad6e64f5874d3832f7842e665c83b5909f2e528f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Mon, 26 Feb 2024 18:52:22 +0100
Subject: [PATCH 11/11] Schedule BigInt support for next major

---
 packages/shared/ReactFeatureFlags.js                          | 4 ++--
 packages/shared/forks/ReactFeatureFlags.native-fb.js          | 4 ++--
 packages/shared/forks/ReactFeatureFlags.native-oss.js         | 4 ++--
 packages/shared/forks/ReactFeatureFlags.test-renderer.js      | 3 +--
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js    | 4 ++--
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js  | 4 ++--
 packages/shared/forks/ReactFeatureFlags.www.js                | 3 ++-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 1423917522c65..0d283614d344f 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -102,8 +102,6 @@ export const enableCPUSuspense = __EXPERIMENTAL__;
 
 export const enableFloat = true;
 
-export const enableBigIntSupport = __EXPERIMENTAL__;
-
 // Enables unstable_useMemoCache hook, intended as a compilation target for
 // auto-memoization.
 export const enableUseMemoCacheHook = __EXPERIMENTAL__;
@@ -176,6 +174,8 @@ export const disableClientCache = false;
 // Changes Server Components Reconciliation when they have keys
 export const enableServerComponentKeys = __NEXT_MAJOR__;
 
+export const enableBigIntSupport = __NEXT_MAJOR__;
+
 /**
  * Enables a new error detection for infinite render loops from updates caused
  * by setState or similar outside of the component owning the state.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index acf266c8688b2..83f004e7ca834 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -86,8 +86,6 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
-export const enableBigIntSupport = false;
-
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = true;
@@ -106,5 +104,7 @@ export const enableRefAsProp = false;
 
 export const enableReactTestRendererWarning = false;
 
+export const enableBigIntSupport = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 7622e6a27c1e7..33226be203439 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -72,8 +72,6 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
-export const enableBigIntSupport = false;
-
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = true;
@@ -97,5 +95,7 @@ export const enableRefAsProp = false;
 
 export const enableReactTestRendererWarning = false;
 
+export const enableBigIntSupport = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 82fa45fe2002e..0bc3beb753d89 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -72,8 +72,6 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
-export const enableBigIntSupport = false;
-
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = true;
@@ -101,6 +99,7 @@ export const enableInfiniteRenderLoopDetection = false;
 const __NEXT_MAJOR__ = __EXPERIMENTAL__;
 export const enableRefAsProp = __NEXT_MAJOR__;
 export const enableReactTestRendererWarning = false;
+export const enableBigIntSupport = __NEXT_MAJOR__;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e268f499a25fe..c9a7cece9cca9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -71,8 +71,6 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
-export const enableBigIntSupport = false;
-
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableDeferRootSchedulingToMicrotask = false;
@@ -93,5 +91,7 @@ export const enableRefAsProp = false;
 
 export const enableReactTestRendererWarning = false;
 
+export const enableBigIntSupport = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index da39b5bbfa3f9..4aa68b2394333 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -72,8 +72,6 @@ export const enableTransitionTracing = false;
 
 export const enableFloat = true;
 
-export const enableBigIntSupport = false;
-
 export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
@@ -96,5 +94,7 @@ export const enableRefAsProp = false;
 
 export const enableReactTestRendererWarning = false;
 
+export const enableBigIntSupport = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 5f639924dc7dc..5d392ffdca688 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -58,7 +58,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCustomElementPropertySupport = true;
 export const enableCPUSuspense = true;
 export const enableFloat = true;
-export const enableBigIntSupport = false;
 export const enableUseMemoCacheHook = true;
 export const enableUseEffectEventHook = true;
 export const enableFilterEmptyStringAttributesDOM = true;
@@ -121,5 +120,7 @@ export const enableServerComponentLogs = true;
 
 export const enableReactTestRendererWarning = false;
 
+export const enableBigIntSupport = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);