Bug: Can't use bigint for the key property about react

[eps1lon]

We have a lot of places where React (or JS) implicitly converts values to strings. TypeScript generally does not allow this at the type level and wants an explicit conversion. So we've followed that model for consistency.

Allowing bigint is not much different than allowing { toString(): string }. But that we wouldn't want because we can't make any inference about how semantically useful the toString method would be for keys.

Allowing bigint specifically makes sense since we already do the same for number. DefinitelyTyped/DefinitelyTyped#66723 was already a good start but it should also make the same change to types/react/ts5.0/index.d.ts. Feel free to open a PR making these two changes.

[bombillazo]

Hey, we just updated to the latest @types/react package version and this has caused some issues when using Keys in places bigint is not supported:
DefinitelyTyped/DefinitelyTyped#66749

My recommendation would be to "stringify" the bigint when passing it to the Key property vs allowing bigint and now requiring to type narrow in cases when bigint is not supported.

[zmrocze]

the bug is simpler than the template expected, sorry if I confused.

The problem is the definition of the Key type. The type doesn't include bigints BUT imo it should.

So really, what reproduction should I show more than the single line that's already there?

[sidharth8338]

Use like this <Div key={4n.toString()} />
By converting the BigInt to a string, you can use it as a key without encountering type errors. However, keep in mind that React will treat these keys as strings, which should work for most scenarios.

[zmrocze]

@LucaDillenburg Hey, thats great! Thanks

[sebmarkbage]

React's runtime have slightly broader implementation than it's TypeScript types because it is possible to use it without types and it's also possible to make mistakes with the types. E.g. you can pass all kinds of values to DOM nodes and they will typically be converted to a string. This lets you pass things like objects etc. That's just common in JavaScript.

React runtime already supports bigint being passed to the key because it'll convert it to a string key. So it behaves as its string value. That's also how numbers work.

The TypeScript definitions are sometimes more restrictive than the runtime to catch common mistakes. So I think the ask here is just to update the TypeScript definition to allow it. Note that it'll still be treated as a string though. Only when passed into the createElement constructor but element.key would still have the string type.

cc @eps1lon

[eps1lon]

Fixed in @types/[email protected].

The breakage happens in places where React.Key was used for something it used to structurally match but not semantically so this seems fine with me. React.Key is the type key accepts, not a type you can key arbitrary objects with.

[MarceloSpessoto]

Hello, could you give a code example of the bug happening?

[rizfanradya]

when you try to create a BigInt like BigInt(4), it won't result in a proper BigInt. Instead, it will produce a regular Number data type. You should use a different notation to create BigInt, such as adding "n" at the end of the number:

const bigIntValue = BigInt(4); // This will produce a Number value, not BigInt
const bigIntValueCorrect = 4n; // This will produce a BigInt

So, to create a BigInt with the value 4, you should use the notation 4n, not BigInt(4). BigInt values created using the 4n notation will have very high precision and are suitable for performing operations with large numbers that cannot be represented by regular Number data type.

[zmrocze]

@rizfanradya Ah, thank you, that's good info as I'm novice with ts.

The problem description stands as is, I've just fixed the code example.

[AmanIITP-abb]

i thing we have to use 4n in case of BigInt(4)

[LucaDillenburg]

I can reproduce the issue. The following code gives this error: "Type 'bigint' is not assignable to type 'Key | null | undefined'"
<div className="App" key={4n}>

I will work with @MarceloSpessoto on this.

[LucaDillenburg]

@zmrocze, after analysing the code with @MarceloSpessoto, we've identified that the Key type definition is not present in this repository. Essential React types are typically defined within the DefinitelyTyped repository. More specifically, the Key type is defined in this file.

Nonetheless, we've taken the initiative to create two Pull Requests aimed at introducing support for bigints in keys. You can access these Pull Requests here:
React - PR27381
DefinitelyTyped - PR

In the meantime, we recommend using a string with key={4n.toString()} as a workaround.

[MarceloSpessoto]

Ok @eps1lon , I will make these changes.

[MarceloSpessoto]

Done