Add support for rendering BigInt #24580

eps1lon · 2022-05-18T19:34:21Z

Summary

Closes #20492

Adds support for rendering BigInt behind enableBigIntSupport (experimental only). This includes support for values of input, option and textarea as BigInt for consistency. Otherwise <div>{5n}</div> would work but not <option>{5n}</option>.

BigInt values are now rendered instead of being treated like no value was given. For example, <div>{5n}</div> would previously render <div></div>. Now it renders the stringified value of the BigInt i.e. <div>5</div>.

The only negative impact I can imagine is the same mistake make people for numbers like <div>{length && items.map(...)}</div> which results in the infamous "0" display in your UI. With BigInt you didn't have this but now you have. But then I'm not aware of any built-in that uses BigInt for collection size.

How did you test this change?

CI
https://codesandbox.io/s/react-missing-bigint-support-uclq9i renders something with a build from this PR: https://codesandbox.io/s/react-missing-bigint-support-l6i9pn

sizebot · 2022-05-18T19:38:30Z

Comparing: 4cd788a...a87598f

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.08%	131.79 kB	131.89 kB	+0.09%	42.40 kB	42.44 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.08%	137.06 kB	137.16 kB	+0.10%	44.00 kB	44.04 kB
facebook-www/ReactDOM-prod.classic.js	+0.05%	457.17 kB	457.39 kB	+0.04%	83.22 kB	83.25 kB
facebook-www/ReactDOM-prod.modern.js	+0.05%	442.41 kB	442.63 kB	+0.03%	80.94 kB	80.96 kB
facebook-www/ReactDOMForked-prod.classic.js	+0.05%	457.94 kB	458.16 kB	+0.03%	83.33 kB	83.36 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
facebook-www/ReactDOMServer-prod.classic.js	+0.31%	48.03 kB	48.18 kB	+0.24%	11.21 kB	11.24 kB
facebook-www/ReactDOMServer-dev.classic.js	+0.29%	157.79 kB	158.24 kB	+0.37%	39.99 kB	40.13 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer.production.min.js	+0.24%	12.35 kB	12.38 kB	+0.14%	3.68 kB	3.69 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer.production.min.js	+0.24%	12.35 kB	12.38 kB	+0.14%	3.68 kB	3.69 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer.production.min.js	+0.24%	12.35 kB	12.38 kB	+0.14%	3.68 kB	3.69 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-persistent.production.min.js	+0.24%	12.42 kB	12.45 kB	+0.14%	3.70 kB	3.70 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-persistent.production.min.js	+0.24%	12.42 kB	12.45 kB	+0.14%	3.70 kB	3.70 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-persistent.production.min.js	+0.24%	12.42 kB	12.45 kB	+0.14%	3.70 kB	3.70 kB
oss-experimental/react/cjs/react.shared-subset.production.min.js	+0.22%	6.40 kB	6.42 kB	+0.27%	2.62 kB	2.62 kB
oss-stable-semver/react-server/cjs/react-server.development.js	+0.22%	130.50 kB	130.78 kB	+0.29%	32.67 kB	32.77 kB
oss-stable/react-server/cjs/react-server.development.js	+0.22%	130.50 kB	130.78 kB	+0.29%	32.67 kB	32.77 kB
oss-experimental/react-server/cjs/react-server.development.js	+0.21%	131.37 kB	131.65 kB	+0.29%	32.88 kB	32.97 kB
oss-stable-semver/react/cjs/react.production.min.js	+0.20%	6.91 kB	6.93 kB	+0.30%	2.70 kB	2.70 kB
oss-stable/react/cjs/react.production.min.js	+0.20%	6.94 kB	6.95 kB	+0.33%	2.72 kB	2.73 kB

Generated by 🚫 dangerJS against a87598f

gaearon · 2022-05-18T22:44:45Z

If we support this, should we also support them as keys? What are the arguments for and against? What about attribute values? Does it already work there?

eps1lon · 2022-05-19T07:09:23Z

What about attribute values? Does it already work there?

It works for attributes that don't get any special treatments (tested with data-test). But from looking through all the typeof val === 'number' occurences in the codebase, it probably doesn't work for <input value /> or <option value />. I left this as a TODO in the PR description.

If we support this, should we also support them as keys? What are the arguments for and against?

I'd probably just support BigInt for key for consistency with children and other attributes. An argument against it would be that bigints as keys allows lists with a huge number of items though that argument isn't all that convincing since lists with Number.MAX_SAFE_INTEGER items are probably already too big.
An argument for BigInt as key would be if you have items whos ID is a BigInt

I find the following two argument against bigint support the most convincing:

implementation work (now and future): almost every typeof value === 'number' check needs to consider 'bigint' whereas it's fairly trivial to just do String(someBigInt) in your codebase
unclear how this works with React Server Components (you can't JSON.stringify BigInt so you need to special case (de-)serialization

harish-sethuraman · 2022-07-03T04:23:17Z

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

@@ -74,6 +74,12 @@ describe('ReactDOMServerIntegration', () => {
      expect(e.nodeValue).toMatch('42');
    });

+    itRenders('a biging', async render => {


Suggested change

itRenders('a biging', async render => {

itRenders('a bigint', async render => {

👀

packages/shared/ReactTypes.js

sebmarkbage

Needs to be flagged or landed as part of next major.

packages/react-server/src/ReactFlightServer.js

react-sizebot · 2024-02-17T14:57:16Z

Comparing: 239d06e...ad6e64f

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.01%	176.86 kB	176.89 kB	+0.02%	55.13 kB	55.14 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.11%	179.01 kB	179.20 kB	+0.07%	55.77 kB	55.81 kB
facebook-www/ReactDOM-prod.classic.js	=	594.00 kB	594.04 kB	=	104.93 kB	104.94 kB
facebook-www/ReactDOM-prod.modern.js	=	577.29 kB	577.33 kB	=	101.95 kB	101.96 kB
test_utils/ReactAllWarnings.js	Deleted	66.35 kB	0.00 kB	Deleted	16.24 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-noop-renderer/cjs/react-noop-renderer.production.min.js	+0.33%	15.37 kB	15.42 kB	+0.19%	4.68 kB	4.69 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer.production.min.js	+0.33%	15.37 kB	15.42 kB	+0.19%	4.68 kB	4.69 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer.production.min.js	+0.33%	15.37 kB	15.42 kB	+0.19%	4.68 kB	4.69 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-persistent.production.min.js	+0.33%	15.45 kB	15.50 kB	+0.19%	4.69 kB	4.70 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-persistent.production.min.js	+0.33%	15.45 kB	15.50 kB	+0.19%	4.69 kB	4.70 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-persistent.production.min.js	+0.33%	15.45 kB	15.50 kB	+0.19%	4.69 kB	4.70 kB
oss-stable-semver/react/cjs/react.react-server.production.js	+0.32%	33.45 kB	33.56 kB	+0.37%	9.96 kB	9.99 kB
oss-stable/react/cjs/react.react-server.production.js	+0.32%	33.47 kB	33.58 kB	+0.34%	9.99 kB	10.02 kB
oss-stable-semver/react/cjs/react.production.js	+0.28%	38.29 kB	38.40 kB	+0.34%	10.67 kB	10.71 kB
oss-stable/react/cjs/react.production.js	+0.28%	38.32 kB	38.43 kB	+0.31%	10.70 kB	10.74 kB
test_utils/ReactAllWarnings.js	Deleted	66.35 kB	0.00 kB	Deleted	16.24 kB	0.00 kB

Generated by 🚫 dangerJS against ad6e64f

eps1lon · 2024-02-18T21:57:33Z

If we support this, should we also support them as keys? What are the arguments for and against?

We already support it in keys since we just stringify keys. The only requirement for keys is that they stringify to something unique within a collection.

Needs to be flagged or landed as part of next major.

Added a flag. I don't think this constitutes a breaking change so I wouldn't block 19 on it and defer it to a minor if we need more time to test it.

DiffTrain build for [2f240c9](2f240c9)

* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [#28471](#28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [#28351](#28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [#28486](#28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [#28468](#28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [#28321](#28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [#28477](#28477)) * [tests] add support for @GATE pragma ([gnoff](https://github.com/gnoff) in [#28479](#28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [#28319](#28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [#24580](#24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28415](#28415))

* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [facebook#28471](facebook#28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [facebook#28351](facebook#28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [facebook#28486](facebook#28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [facebook#28468](facebook#28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [facebook#28321](facebook#28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [facebook#28477](facebook#28477)) * [tests] add support for @GATE pragma ([gnoff](https://github.com/gnoff) in [facebook#28479](facebook#28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [facebook#28319](facebook#28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [facebook#24580](facebook#24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28415](facebook#28415))

DiffTrain build for commit 2f240c9.

sant123 · 2024-06-25T05:32:31Z

This does not work on 18.3.1 😕

eps1lon · 2024-06-25T08:04:42Z

It wasn't intended for 18.x. It's part of React 19

sant123 · 2024-06-25T14:52:58Z

Ohhh got it, thanks!!

bernaferrari · 2024-09-17T19:00:11Z

I really hate this change. React.Children.toArray(children) won't work anymore because Type 'bigint' is not assignable to type 'ReactNode | ReactNode[].

This breaks: (Spread types may only be created from object types.ts(2698))

   {React.Children.map(children, (child) => {
          if (!React.isValidElement(child)) {
            return null
          }

          return React.cloneElement(child, {
            ...child.props,
            variant: child.props?.variant || variant,
          })
        })}

Also createPortal won't work anymore: vercel/next.js#64753

And finally, you need to wrap some things with <>{children}</> instead of using {children}.

eps1lon · 2024-09-17T19:46:23Z

And finally, you need to wrap some things with <>{children}</> instead of using {children}.

You shouldn't have to. What makes you say that?

bernaferrari · 2024-09-17T19:50:52Z

If you check the discussion there is more people with the same problem: vercel/next.js#64753

Not sure it is shadcn/ui, nextjs or what.

eps1lon · 2024-09-17T21:50:11Z

Then let's identify the issue first before concluding this is a bad change. I'll check out the repro. But let's confirm things first before opening up multiple issues.

facebook-github-bot added the CLA Signed label May 18, 2022

eps1lon force-pushed the feat/bigint/render branch 2 times, most recently from e099a7b to 7b4ffc7 Compare May 18, 2022 20:09

eps1lon marked this pull request as ready for review May 18, 2022 20:15

eps1lon force-pushed the feat/bigint/render branch 2 times, most recently from 071e078 to 31bb294 Compare July 2, 2022 07:48

harish-sethuraman reviewed Jul 3, 2022

View reviewed changes

eps1lon force-pushed the feat/bigint/render branch from 31bb294 to a87598f Compare July 3, 2022 08:50

sebmarkbage reviewed Feb 16, 2024

View reviewed changes

packages/shared/ReactTypes.js Outdated Show resolved Hide resolved

sebmarkbage approved these changes Feb 16, 2024

View reviewed changes

sebmarkbage reviewed Feb 16, 2024

View reviewed changes

packages/react-server/src/ReactFlightServer.js Outdated Show resolved Hide resolved

eps1lon force-pushed the feat/bigint/render branch from a87598f to 7c0f9a2 Compare February 17, 2024 14:53

eps1lon force-pushed the feat/bigint/render branch from 7c0f9a2 to 402ab6f Compare February 18, 2024 12:56

eps1lon changed the title ~~Add support for rendering BigInt as children~~ Add support for rendering BigInt Feb 18, 2024

eps1lon force-pushed the feat/bigint/render branch 3 times, most recently from 6efee0c to 822d3e4 Compare February 18, 2024 21:44

eps1lon requested a review from sebmarkbage February 26, 2024 12:42

eps1lon force-pushed the feat/bigint/render branch from 9b32d88 to b0b5a7f Compare February 26, 2024 17:56

eps1lon and others added 6 commits February 26, 2024 18:59

bigint-tests

c337aab

f test

6b9174f

bigint-render-impl

2217076

Add case to devtools fixture

1c1b6aa

bigint tests for input values

5ffd3fc

bigint impl for input values

46e5e92

Sebastian Silbermann added 5 commits February 26, 2024 18:59

bigint test for title children

aa56850

bigint impl for title children

8075e41

Add feature flag for experimental release channel

1011269

Ungate already passing tests

111ff28

Schedule BigInt support for next major

ad6e64f

eps1lon force-pushed the feat/bigint/render branch from b0b5a7f to ad6e64f Compare February 26, 2024 18:04

eps1lon merged commit 2f240c9 into facebook:main Feb 26, 2024
37 checks passed

eps1lon deleted the feat/bigint/render branch February 26, 2024 18:18

github-actions bot pushed a commit that referenced this pull request Feb 26, 2024

Add support for rendering BigInt (#24580)

b29a80f

DiffTrain build for [2f240c9](2f240c9)

eps1lon mentioned this pull request Feb 26, 2024

Make enableBigIntSupport www dynamic #28445

Closed

hoxyq mentioned this pull request Mar 5, 2024

React DevTools 5.0.1 -> 5.0.2 #28496

Merged

ztanner mentioned this pull request Mar 18, 2024

Update React from 6c3b8dbfe to a4939017f vercel/next.js#63413

Closed

gnoff mentioned this pull request Mar 25, 2024

Update React from 14898b6a9 to e373190fa vercel/next.js#63685

Closed

ztanner mentioned this pull request Apr 2, 2024

Update React from 14898b6a9 to a870b2d54 vercel/next.js#63976

Closed

eps1lon mentioned this pull request Apr 13, 2024

[react] Add types for bigint render support in Canary DefinitelyTyped/DefinitelyTyped#69331

Merged

EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024

Add support for rendering BigInt (facebook#24580)

ac7a2de

bigfootjon pushed a commit that referenced this pull request Apr 18, 2024

Add support for rendering BigInt (#24580)

d2778ef

DiffTrain build for commit 2f240c9.

eps1lon mentioned this pull request Apr 19, 2024

Update React from 14898b6a9 to c3048aab4 vercel/next.js#64798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for rendering BigInt #24580

Add support for rendering BigInt #24580

eps1lon commented May 18, 2022 •

edited

Loading

sizebot commented May 18, 2022 •

edited

Loading

gaearon commented May 18, 2022

eps1lon commented May 19, 2022

harish-sethuraman Jul 3, 2022

sebmarkbage left a comment

react-sizebot commented Feb 17, 2024 •

edited

Loading

eps1lon commented Feb 18, 2024 •

edited

Loading

sant123 commented Jun 25, 2024

eps1lon commented Jun 25, 2024

sant123 commented Jun 25, 2024

bernaferrari commented Sep 17, 2024 •

edited

Loading

eps1lon commented Sep 17, 2024

bernaferrari commented Sep 17, 2024

eps1lon commented Sep 17, 2024

	itRenders('a biging', async render => {
	itRenders('a bigint', async render => {

Add support for rendering BigInt #24580

Add support for rendering BigInt #24580

Conversation

eps1lon commented May 18, 2022 • edited Loading

Summary

How did you test this change?

sizebot commented May 18, 2022 • edited Loading

Critical size changes

Significant size changes

gaearon commented May 18, 2022

eps1lon commented May 19, 2022

harish-sethuraman Jul 3, 2022

Choose a reason for hiding this comment

sebmarkbage left a comment

Choose a reason for hiding this comment

react-sizebot commented Feb 17, 2024 • edited Loading

Critical size changes

Significant size changes

eps1lon commented Feb 18, 2024 • edited Loading

sant123 commented Jun 25, 2024

eps1lon commented Jun 25, 2024

sant123 commented Jun 25, 2024

bernaferrari commented Sep 17, 2024 • edited Loading

eps1lon commented Sep 17, 2024

bernaferrari commented Sep 17, 2024

eps1lon commented Sep 17, 2024

eps1lon commented May 18, 2022 •

edited

Loading

sizebot commented May 18, 2022 •

edited

Loading

react-sizebot commented Feb 17, 2024 •

edited

Loading

eps1lon commented Feb 18, 2024 •

edited

Loading

bernaferrari commented Sep 17, 2024 •

edited

Loading