Skip to content

perf(modules): replace index-based keys with stable identifiers in list renders #313

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
angelina-2206 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

perf(modules): replace index-based keys with stable identifiers in list renders #313

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
4 changes: 2 additions & 2 deletions modules/home/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion modules/playground/components/breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
)}
Expand Down
4 changes: 2 additions & 2 deletions modules/playground/components/collaboration-avatars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions modules/playground/components/env-manager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { Plus, Trash2, KeyRound, Save } from "lucide-react";
import { toast } from "sonner";

interface EnvVar {
id: string;
key: string;
value: string;
}
Expand Down Expand Up @@ -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()
});
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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"
}`}
Expand Down
4 changes: 2 additions & 2 deletions modules/profile/components/AIInsights.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions modules/profile/components/ContributionHeatmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion modules/profile/components/KPIStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Loading