From 5ae7c511a6be8f4acaee7ccf975854a29bc4f069 Mon Sep 17 00:00:00 2001
From: Angelina <angelinachatterjee2206@gmail.com>
Date: Tue, 26 May 2026 23:17:19 +0530
Subject: [PATCH] perf(modules): replace index-based keys with stable
 identifiers in list renders

Signed-off-by: Angelina <angelinachatterjee2206@gmail.com>
---
 modules/home/features.tsx                               | 4 ++--
 modules/playground/components/breadcrumbs.tsx           | 2 +-
 modules/playground/components/collaboration-avatars.tsx | 4 ++--
 modules/playground/components/env-manager.tsx           | 6 ++++--
 modules/profile/components/AIInsights.tsx               | 4 ++--
 modules/profile/components/ContributionHeatmap.tsx      | 4 ++--
 modules/profile/components/KPIStats.tsx                 | 2 +-
 7 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/modules/home/features.tsx b/modules/home/features.tsx
index 0604745d..fa59e6bb 100644
--- a/modules/home/features.tsx
+++ b/modules/home/features.tsx
@@ -88,9 +88,9 @@ const features: Feature[] = [
 export function Features() {
     return (
         <ul className="grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-5 xl:grid-rows-4 xl:gap-6">
-            {features.map((feature, index) => (
+            {features.map((feature) => (
                 <GridItem
-                    key={index}
+                    key={feature.title}
                     area={feature.area}
                     icon={<feature.icon className="h-6 w-6 text-red-600 dark:text-red-500" />}
                     title={feature.title}
diff --git a/modules/playground/components/breadcrumbs.tsx b/modules/playground/components/breadcrumbs.tsx
index 83c95949..97df9b92 100644
--- a/modules/playground/components/breadcrumbs.tsx
+++ b/modules/playground/components/breadcrumbs.tsx
@@ -50,7 +50,7 @@ export function Breadcrumbs({ activeFile, templateData }: BreadcrumbsProps) {
                 const ext = isLast ? activeFile.fileExtension : undefined;
 
                 return (
-                    <span key={index} className="flex items-center gap-1 shrink-0">
+                    <span key={segments.slice(0, index + 1).join('/')} className="flex items-center gap-1 shrink-0">
                         {index > 0 && (
                             <ChevronRight className="h-3 w-3 text-muted-foreground/40" />
                         )}
diff --git a/modules/playground/components/collaboration-avatars.tsx b/modules/playground/components/collaboration-avatars.tsx
index 8d3e1ed9..817008f0 100644
--- a/modules/playground/components/collaboration-avatars.tsx
+++ b/modules/playground/components/collaboration-avatars.tsx
@@ -46,8 +46,8 @@ export function CollaborationAvatars({ playgroundId }: { playgroundId: string })
 
     return (
         <div className="flex items-center -space-x-2 mr-2">
-            {users.slice(0, 4).map((u, i) => (
-                <TooltipProvider key={i}>
+            {users.slice(0, 4).map((u) => (
+                <TooltipProvider key={u.name}>
                     <Tooltip>
                         <TooltipTrigger asChild>
                             <div
diff --git a/modules/playground/components/env-manager.tsx b/modules/playground/components/env-manager.tsx
index bc41e6cd..8a444a1f 100644
--- a/modules/playground/components/env-manager.tsx
+++ b/modules/playground/components/env-manager.tsx
@@ -14,6 +14,7 @@ import { Plus, Trash2, KeyRound, Save } from "lucide-react";
 import { toast } from "sonner";
 
 interface EnvVar {
+    id: string;
     key: string;
     value: string;
 }
@@ -61,6 +62,7 @@ export function EnvManager({
                     const splitIdx = trimmed.indexOf("=");
                     if (splitIdx > -1) {
                         parsedVars.push({
+                            id: Math.random().toString(36).substring(2, 9),
                             key: trimmed.substring(0, splitIdx).trim(),
                             value: trimmed.substring(splitIdx + 1).trim()
                         });
@@ -94,7 +96,7 @@ export function EnvManager({
     const hasErrors = hasEmptyKey || hasInvalidKey || hasDuplicate;
 
     const handleAddVar = () => {
-        setEnvVars([...envVars, { key: "", value: "" }]);
+        setEnvVars([...envVars, { id: Math.random().toString(36).substring(2, 9), key: "", value: "" }]);
     };
 
     const handleRemoveVar = (index: number) => {
@@ -177,7 +179,7 @@ export function EnvManager({
 
                             return (
                                 <div
-                                    key={idx}
+                                    key={v.id}
                                     className={`flex items-center gap-1.5 border p-1.5 rounded bg-muted/20 ${
                                         itemHasError ? "border-destructive/40 bg-destructive/5" : "border-border"
                                     }`}
diff --git a/modules/profile/components/AIInsights.tsx b/modules/profile/components/AIInsights.tsx
index 76c1496f..f3948692 100644
--- a/modules/profile/components/AIInsights.tsx
+++ b/modules/profile/components/AIInsights.tsx
@@ -41,8 +41,8 @@ export default function AIInsights() {
                                 dataKey="value"
                                 stroke="none"
                             >
-                                {data.map((entry, index) => (
-                                    <Cell key={`cell-${index}`} fill={entry.color} />
+                                {data.map((entry) => (
+                                    <Cell key={`cell-${entry.name}`} fill={entry.color} />
                                 ))}
                             </Pie>
                             <RechartsTooltip
diff --git a/modules/profile/components/ContributionHeatmap.tsx b/modules/profile/components/ContributionHeatmap.tsx
index 9a815622..a2e87033 100644
--- a/modules/profile/components/ContributionHeatmap.tsx
+++ b/modules/profile/components/ContributionHeatmap.tsx
@@ -89,9 +89,9 @@ export default function ContributionHeatmap({ data }: { data: HeatmapData[] }) {
                 <div className="w-full overflow-x-auto pb-2">
                     <div className="flex gap-1 min-w-max">
                         {weeks.map((week, wIndex) => (
-                            <div key={wIndex} className="flex flex-col gap-1">
+                            <div key={week[0]?.date || wIndex} className="flex flex-col gap-1">
                                 {week.map((day, dIndex) => (
-                                    <TooltipProvider key={`${wIndex}-${dIndex}`}>
+                                    <TooltipProvider key={day.date}>
                                         <Tooltip>
                                             <TooltipTrigger>
                                                 <motion.div
diff --git a/modules/profile/components/KPIStats.tsx b/modules/profile/components/KPIStats.tsx
index a70e9c4c..b6e1d95c 100644
--- a/modules/profile/components/KPIStats.tsx
+++ b/modules/profile/components/KPIStats.tsx
@@ -60,7 +60,7 @@ export default function KPIStats({ stats }: KPIStatsProps) {
     return (
         <div className="grid w-full grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
             {statItems.map((item, index) => (
-                <StatCard key={index} {...item} delay={index * 0.1} />
+                <StatCard key={item.label} {...item} delay={index * 0.1} />
             ))}
         </div>
     );