Skip to content

fix: replace index-only keys with stable composite keys in mapped lists #3777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karyanayandi wants to merge 1 commit into
base: canary
Choose a base branch
from
+22 −10
Open

fix: replace index-only keys with stable composite keys in mapped lists #3777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,13 +194,21 @@ export const ShowDeployment = ({
{" "}
{filteredLogs.length > 0 ? (
filteredLogs.map((log: LogLine, index: number) => (
<TerminalLine key={index} log={log} noTimestamp />
<TerminalLine
key={`${log.rawTimestamp ?? ""}-${index}`}
log={log}
noTimestamp
/>
))
) : (
<>
{optionalErrors.length > 0 ? (
optionalErrors.map((log: LogLine, index: number) => (
<TerminalLine key={`extra-${index}`} log={log} noTimestamp />
<TerminalLine
key={`extra-${log.rawTimestamp ?? ""}-${index}`}
log={log}
noTimestamp
/>
Comment on lines +197 to +211
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both mapped log lists use keys that include index, which will change when logs are filtered/toggled and can cause unnecessary remounting. Prefer keys based on log identity only (e.g., rawTimestamp + message or a stable parsed id/lineNumber) to keep rows stable.

Copilot uses AI. Check for mistakes.
))
) : (
<div className="flex justify-center items-center h-full text-muted-foreground">
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<div className="flex flex-wrap gap-2 mb-2">
{field.value?.map((path, index) => (
<Badge
key={index}
key={`${path}-${index}`}
variant="secondary"
className="flex items-center gap-1"
>
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<div className="flex flex-wrap gap-2 mb-2">
{field.value?.map((path, index) => (
<Badge
key={index}
key={`${path}-${index}`}
variant="secondary"
className="flex items-center gap-1"
>
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,7 @@ export const DockerLogsId: React.FC<Props> = ({
{filteredLogs.length > 0 ? (
filteredLogs.map((filteredLog: LogLine, index: number) => (
<TerminalLine
key={index}
key={`${filteredLog.rawTimestamp ?? ""}-${index}`}
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

key still incorporates the array index, so changing filteredLogs (search/type filters, etc.) will reshuffle indexes and cause React to remount existing log rows. Use a key based on the log content/identity (e.g., rawTimestamp + message, or a stable id from parsing) to keep rows stable across filtering.

Suggested change
key={`${filteredLog.rawTimestamp ?? ""}-${index}`}
key={`${filteredLog.rawTimestamp ?? ""}-${filteredLog.message ?? ""}`}

Copilot uses AI. Check for mistakes.
log={filteredLog}
searchTerm={search}
noTimestamp={!showTimestamp}
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/settings/profile/configure-2fa.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ export const Configure2FA = () => {
<div className="grid grid-cols-2 gap-2">
{backupCodes.map((code, index) => (
<code
key={index}
key={`${code}-${index}`}
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Backup codes are expected to be unique; using ${code}-${index} makes keys order-dependent. Prefer key={code} for a stable key.

Suggested change
key={`${code}-${index}`}
key={code}

Copilot uses AI. Check for mistakes.
className="bg-background p-2 rounded text-sm font-mono text-center"
>
{code}
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ export const Enable2FA = () => {
<div className="grid grid-cols-2 gap-2">
{backupCodes.map((code, index) => (
<code
key={index}
key={`${code}-${index}`}
className="bg-muted p-2 rounded text-sm font-mono"
Comment on lines 403 to 405
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Backup codes should already be unique values; including index makes the key unstable if the list order changes. Consider using key={code} to keep keys stable and simpler.

Copilot uses AI. Check for mistakes.
>
{code}
Expand Down
4 changes: 2 additions & 2 deletions apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,9 +307,9 @@ export const WelcomeSuscription = () => {
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{features.map((feature, index) => (
{features.map((feature) => (
<div
key={index}
key={feature.title}
className="flex flex-col items-start p-4 bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow"
>
<div className="text-3xl mb-2">{feature.icon}</div>
Expand Down
6 changes: 5 additions & 1 deletion apps/dokploy/components/shared/drawer-logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
{" "}
{filteredLogs.length > 0 ? (
filteredLogs.map((log: LogLine, index: number) => (
<TerminalLine key={index} log={log} noTimestamp />
<TerminalLine
key={`${log.rawTimestamp ?? ""}-${index}`}
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The list key still depends on index, so when filteredLogs changes due to filtering/searching the same log line can receive a different key and be remounted. Prefer a key derived solely from log identity (e.g., rawTimestamp + message, or introduce a stable id/lineNumber in LogLine) and avoid index unless duplicates are expected and handled.

Suggested change
key={`${log.rawTimestamp ?? ""}-${index}`}
key={JSON.stringify(log)}

Copilot uses AI. Check for mistakes.
log={log}
noTimestamp
/>
))
) : (
<div className="flex justify-center items-center h-full text-muted-foreground">
Expand Down
Loading