⚡ Bolt: Optimize PlayerList rendering #18
Conversation
Reduces unnecessary re-renders of the PlayerList component by memoizing PlayerCard. The player list is derived from the global game state on every render, causing object references to change even when data is identical. This change: 1. Wraps PlayerCard in React.memo with a custom comparison function. 2. Checks only relevant fields (id, nickname, status, etc.) for equality. 3. Explicitly ignores the unstable `onKick` callback since its behavior is stable. This significantly reduces rendering work during frequent state updates (e.g. timers). Co-authored-by: WeixuanZ <39925558+WeixuanZ@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
⚡ Performance Improvement
Optimized the
PlayerCardcomponent inPlayerList.tsxto prevent unnecessary re-renders.Why:
The
GameRoomcomponent regenerates theplayersarray viaObject.values(activeState.players)on every render (triggered by timers, chat, or other player actions). This caused allPlayerCardcomponents to re-render even if their data hadn't changed.What:
PlayerCardinReact.memo.arePlayerCardPropsEqualfunction to compare relevant player fields (id,nickname,role,is_alive, etc.).onKickprop from comparison because it's passed as a new inline function/closure on every render, but its underlying behavior (setKickTarget) is stable.Impact:
Verification:
npm run lintpassed.npm run buildpassed.PR created automatically by Jules for task 426892580248412157 started by @WeixuanZ