Personal Access Tokens list uses unstable React key (createdAt)

[ScriptShah]

Description:

The Personal Access Tokens list uses createdAt as the React key when rendering token rows. Since createdAt is not guaranteed to be unique or stable, this can cause unstable list rendering and potential React reconciliation issues.

Using non-unique or unstable values as keys is not aligned with React best practices, as it may lead to incorrect DOM reuse, unexpected UI behavior, or subtle bugs during updates.

This affects the Personal Access Tokens page.

Route: /account/tokens
File: apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensTable.tsx

---

Steps to reproduce:

1. Go to Account → Personal Access Tokens (/account/tokens).
2. Create multiple personal access tokens.
3. Observe that the list rendering uses createdAt as the React key.
4. When tokens share similar timestamps or the list order changes, React may reuse DOM elements incorrectly.

---

Expected behavior:

Each token row should use a stable and unique identifier (such as the token _id) as the React key, following React best practices and ensuring predictable list rendering.

---

Actual behavior:

The list uses createdAt as the React key, which is not guaranteed to be unique or stable and does not follow React best practices, potentially leading to rendering inconsistencies or React warnings.

---

Server Setup Information:

• Version of Rocket.Chat Server: N/A (frontend-only issue)
• License Type: N/A
• Number of Users: N/A
• Operating System: N/A
• Deployment Method: N/A
• Number of Running Instances: N/A
• DB Replicaset Oplog: N/A
• NodeJS Version: N/A
• MongoDB Version: N/A

---

Client Setup Information

• Desktop App or Browser Version: N/A
• Operating System: N/A

---

Additional context

React recommends using stable, unique identifiers for list keys to avoid reconciliation issues. Replacing createdAt with the token _id would resolve this issue and align the implementation with React best practices.

---

Relevant logs:

N/A (UI rendering logic issue)

[Amartya989870xxxx]

Hi @ScriptShah

I’ve been looking into this issue and went through AccountTokensTable.tsx. The use of createdAt as the React key definitely looks unstable, especially when tokens are regenerated or returned in a different order.

I am interested in working on this if no one else is already assigned. I will first confirm what stable identifier is available on the token object and update the list rendering accordingly, along with checking for any related typing issues.

Please let me know if I can take this up, happy to work on it!

[ScriptShah]

Hi @Amartya989870xxxx , thanks for looking into this.

For now, we’re waiting for feedback from the maintainers. In the meantime, I’m working on a PR to address this issue.

If it doesn’t move forward for any reason, you’re more than welcome to take it up.

Appreciate your interest and initiative!

[Amartya989870xxxx]

Thanks for the update, appreciate you letting me know.
I'll keep an eye on the thread for now.