⚡ Bolt: [성능 개선] 이벤트 리스트 렌더링 시 Date 객체 생성 및 파싱 최적화#129
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
* Pre-parse sessionStartedAt into a numeric timestamp via useMemo at the component level * Pass the primitive value to row renderer, avoiding per-item Date object instantiations and parsing * Reduces memory allocations and improves scrolling performance in virtualized lists
|
👋 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. |
There was a problem hiding this comment.
Pull request overview
This PR reduces per-row overhead in the dashboard session EventList by precomputing the session start timestamp once and passing the parsed milliseconds value down to the virtualized row renderer, avoiding repeated parsing/work during scrolling.
Changes:
- Refactored
formatElapsedto accept a pre-parsedsessionStartedAtMs: numberinstead of a start-time string. - Added a memoized
sessionStartedAtMscomputation inEventListand threaded it throughRowPropsintoRow.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const sessionStartedAtMs = useMemo( | ||
| () => new Date(sessionStartedAt).getTime(), | ||
| [sessionStartedAt] | ||
| ); |
|
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 work is now obsolete and stopping work on this task. |
💡 What (무엇을):
대시보드 세션 이벤트 리스트(
EventList) 렌더링 시,sessionStartedAt날짜 문자열을 파싱하는 로직(new Date().getTime())을Row외부로 분리했습니다.EventList컴포넌트 내부에서useMemo를 통해 파싱된number값(sessionStartedAtMs)을 생성하고 이를 하위 컴포넌트로 전달하도록 변경했습니다.🎯 Why (왜):
기존 구조에서는 가상화된 리스트(virtualized list)의 각
Row가 렌더링될 때마다formatElapsed함수 내에서new Date(sessionStartedAt).getTime()을 반복적으로 호출하고 있었습니다. 수백~수천 개의 이벤트 항목이 스크롤될 때마다 무의미한 Date 객체가 반복 생성되고 문자열 파싱이 발생하여 메인 스레드를 블로킹하고 가비지 컬렉션 부하를 유발하는 병목 지점이었습니다.📊 Impact (기대 효과):
각 row 렌더링 시 발생하는 Date 객체 초기화 비용을 제거함으로써 리스트 스크롤 시 불필요한 메모리 할당(Array allocations 및 GC 부하)을 방지하고 프론트엔드의 성능을 개선합니다. 특히 이벤트 개수가 매우 많은 대형 세션 화면에서 UI 버벅거림(jank)이 감소합니다.
🔬 Measurement (어떻게 검증했는지):
EventList,Row의 프로퍼티 타이핑 변경 반영 완료pnpm --filter @argos/web test를 통해 렌더링 관련 유닛 테스트 모두 통과 확인PR created automatically by Jules for task 7397012600858507818 started by @seonghobae