⚡ Bolt: [performance improvement] Optimize EventList re-rendering#162
⚡ Bolt: [performance improvement] Optimize EventList re-rendering#162seonghobae wants to merge 11 commits into
Conversation
…licate calculation `buildTimelineGroups` was calculated redundantly inside both `EventList` and `SessionActivityRibbon` inside `useMemo` hooks. This commit moves the `useMemo` computation into the parent `page.tsx` component and passes down `groups` as a prop to its children, preventing duplicate O(n) array iterations per `events` change.
Replace chained `.reduce()` and `Object.values()` with a single `for...of` loop over `Object.keys()` to avoid unnecessary intermediate array allocations and improve iteration performance during report aggregation.
overview-stats 컴포넌트의 설명 텍스트를 펼치거나 접는 버튼에 키보드 포커스 스타일이 누락되어 있어, 키보드 내비게이션 사용자에게 현재 포커스 위치를 명확히 보여주지 못하는 문제를 수정했습니다. Tailwind CSS의 `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm` 클래스를 추가하여 탭(Tab) 키 이동 시 포커스 링이 보이도록 접근성을 개선했습니다.
- `TokenUsageChart`와 `WeeklyFlowChart`의 데이터 변환 로직에 `useMemo`를 적용하여 불필요한 리렌더링 최적화.
…y-improvements-7782421783208925042
…data-8534904799192449677
…tats-focus-1138085163110647654
…-loops-in-reports-11490543380196529130
…line-groups-memo-10280015208843955185
Implemented React.memo for the virtualized event list rows with a custom areEqual function. This prevents re-rendering all visible rows when the selection state changes, making selection interactions significantly faster.
|
👋 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. |
|
Closing as superseded during org-wide PR triage. Keeping #211 as the canonical PR for the same overlapping topic: event list/session timeline date parsing optimization. This PR is stale/conflicted or has review blockers, so retaining one current PR reduces duplicated review and merge conflict work. |
Understood. Acknowledging that this PR is superseded by #211 and stopping work on this task. |
1 participant
💡 What: Wrap the virtual list Row component in
React.memowith a customareEqualfunction.🎯 Why: Previously, changing the selection index caused the entire
rowPropsobject to change, resulting inreact-windowunnecessarily re-rendering all currently visible rows.📊 Impact: Reduces unnecessary React re-renders for unselected list items on selection change (significantly improving click performance for virtualized event lists).
🔬 Measurement: Use React Developer Tools Profiler and click an event list item. Only the newly selected and previously selected items will re-render, rather than every visible list item.
PR created automatically by Jules for task 396649656151761215 started by @seonghobae