bigint-render-impl

packages/react-dom/src/client/ReactDOMComponent.js

@@ -317,7 +317,7 @@ function setInitialDOMProperties(
         if (canSetTextContent) {
           setTextContent(domElement, nextProp);
         }
-      } else if (typeof nextProp === 'number') {
+      } else if (typeof nextProp === 'number' || typeof nextProp === 'bigint') {
         setTextContent(domElement, '' + nextProp);
       }
     } else if (

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -254,7 +254,8 @@ export function createInstance(
     validateDOMNesting(type, null, hostContextDev.ancestorInfo);
     if (
       typeof props.children === 'string' ||
-      typeof props.children === 'number'
+      typeof props.children === 'number' ||
+      typeof props.children === 'bigint'
     ) {
       const string = '' + props.children;
       const ownAncestorInfo = updatedAncestorInfo(

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -294,7 +294,11 @@ function getNonChildrenInnerMarkup(props) {
     }
   } else {
     const content = props.children;
-    if (typeof content === 'string' || typeof content === 'number') {
+    if (
+      typeof content === 'string' ||
+      typeof content === 'number' ||
+      typeof content === 'bigint'
+    ) {
       return escapeTextForBrowser(content);
     }
   }
@@ -1001,7 +1005,11 @@ class ReactDOMServerRenderer {
     context: Object,
     parentNamespace: string,
   ): string {
-    if (typeof child === 'string' || typeof child === 'number') {
+    if (
+      typeof child === 'string' ||
+      typeof child === 'number' ||
+      typeof child === 'bigint'
+    ) {
       const text = '' + child;
       if (text === '') {
         return '';

packages/react-dom/src/server/escapeTextForBrowser.js

@@ -104,7 +104,11 @@ function escapeHtml(string) {
  * @return {string} An escaped string.
  */
 function escapeTextForBrowser(text) {
-  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.

packages/react-noop-renderer/src/createReactNoop.js

@@ -263,7 +263,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'
     );
   }
 

packages/react-reconciler/src/ReactChildFiber.new.js

@@ -490,7 +490,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): 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
@@ -567,7 +568,8 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     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
@@ -630,7 +632,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): 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.
@@ -1321,7 +1324,8 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       return placeSingleChild(
         reconcileSingleTextNode(

packages/react-reconciler/src/ReactChildFiber.old.js

@@ -490,7 +490,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): 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
@@ -567,7 +568,8 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     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
@@ -630,7 +632,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): 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.
@@ -1321,7 +1324,8 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       return placeSingleChild(
         reconcileSingleTextNode(

packages/react-server/src/ReactFizzServer.js

@@ -1352,7 +1352,7 @@ function renderNodeDestructiveImpl(
     return;
   }
 
-  if (typeof node === 'number') {
+  if (typeof node === 'number' || typeof node === 'bigint') {
     const segment = task.blockedSegment;
     segment.lastPushedText = pushTextInstance(
       task.blockedSegment.chunks,

packages/react-server/src/ReactFlightServer.js

@@ -667,6 +667,7 @@ export function resolveModelToJSON(
   if (
     typeof value === 'boolean' ||
     typeof value === 'number' ||
+    typeof value === 'bigint' ||
     typeof value === 'undefined'
   ) {
     return value;

packages/react/src/ReactChildren.js

@@ -96,6 +96,7 @@ function mapIntoArray(
     switch (type) {
       case 'string':
       case 'number':
+      case 'bigint':
         invokeCallback = true;
         break;
       case 'object':