ca2fd288ab
Primary fix: setTeamTimers now bails out with `return prev` when the
value hasn't changed, preventing a full DraftRoom re-render on every
1-second timer tick (was 33% of profiler samples).
Memoization: wrap AvailableParticipantsSection, TeamsDraftedGrid,
QueueSection, SidebarRecentPicks, and DraftGridSection in React.memo
so timer ticks don't cascade into heavy components that don't use
timer state.
Stable refs: wrap nine action handlers in useCallback and extract two
inline arrow functions from props objects so memo() comparisons
actually bail out. Memoize the { numFlexPicks } object passed to
TeamsDraftedGrid.
socketVersion: expose an incrementing counter from useDraftSocket so
the socket handler effect re-registers on socket recreation.
Async cleanup: add abort flag + in-flight guard to the visibilitychange
JWT refresh handler to prevent concurrent executions and stale state
updates after unmount. Add abort flag to useDraftNotifications
permissions.query() to prevent dangling onchange if unmounted
mid-promise.
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { memo } from "react";
|
|
import { Badge } from "~/components/ui/badge";
|
|
|
|
interface SidebarRecentPicksProps {
|
|
picks: Array<{
|
|
id: string;
|
|
pickNumber: number;
|
|
round: number;
|
|
participant: {
|
|
name: string;
|
|
};
|
|
sport: {
|
|
name: string;
|
|
};
|
|
team: {
|
|
name: string;
|
|
};
|
|
}>;
|
|
}
|
|
|
|
export const SidebarRecentPicks = memo(function SidebarRecentPicks({ picks }: SidebarRecentPicksProps) {
|
|
return (
|
|
<div className="p-4">
|
|
{picks.length === 0 ? (
|
|
<p className="text-muted-foreground text-sm text-center py-8">
|
|
No picks yet...
|
|
</p>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{picks
|
|
.slice()
|
|
.reverse()
|
|
.map((pick) => (
|
|
<div
|
|
key={pick.id}
|
|
className="flex items-center justify-between p-2 bg-muted rounded-lg text-sm"
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
|
<Badge variant="outline" className="text-xs flex-shrink-0">
|
|
#{pick.pickNumber}
|
|
</Badge>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-semibold truncate">{pick.participant.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{pick.sport.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right flex-shrink-0 ml-2">
|
|
<p className="font-medium text-xs truncate max-w-[100px]">{pick.team.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
R{pick.round}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|