Skip to content

⚡ Bolt: [성능 개선] SessionTimelineChart 배열 파싱 로직 최적화 및 리렌더링 방지#223

Open
seonghobae wants to merge 4 commits into
developmentalfrom
bolt-perf-timeline-chart-12341394679647547712
Open

⚡ Bolt: [성능 개선] SessionTimelineChart 배열 파싱 로직 최적화 및 리렌더링 방지#223
seonghobae wants to merge 4 commits into
developmentalfrom
bolt-perf-timeline-chart-12341394679647547712

Conversation

@seonghobae

Copy link
Copy Markdown

💡 What (무엇을): SessionTimelineChart 컴포넌트의 렌더링 성능을 개선했습니다. Recharts에 전달되는 배열(chartData)을 생성할 때 내부 루프인 getToolSummaryForIndex 함수 내에서 매번 new Date().getTime()을 호출하여 문자열을 파싱하던 부분을 외부에서 미리 파싱해두도록(pre-parsing) 변경했습니다. 또한 결과 데이터를 useMemo를 통해 캐싱하여 불필요한 리렌더링마다 배열이 재생성되는 것을 방지했습니다.

🎯 Why (왜): React 렌더 사이클 내의 O(N x M) 루프 안에서 무거운 문자열 파싱 작업을 수행하면 성능 저하(프레임 드랍)를 유발합니다. Recharts 특성상 렌더링 최적화를 위해 주입되는 배열 인스턴스의 레퍼런스 유지가 중요하며 useMemo 캐싱이 필수적입니다. 추가적으로, early return 구문 이전에 useMemo Hook들을 배치함으로써 'React Hook conditional calling error'도 미연에 방지했습니다.

📊 Impact (영향력): 복잡한 타임라인 데이터를 그릴 때, 날짜 문자열 파싱에 소요되는 메인 스레드 블로킹 시간이 대폭 감소하여 컴포넌트 리렌더링 성능이 비약적으로 향상됩니다 (O(N x M) -> O(N + M) 파싱 횟수 감소).

🔬 Measurement (측정방법): 로컬 개발 환경에서 많은 양의 툴 호출 이벤트가 있는 세션을 조회해보고, React Profiler를 통해 해당 차트 영역 리렌더링 소요 시간(ms)이 현저히 줄어든 것을 확인할 수 있습니다. 테스트를 모두 성공적으로 마쳤습니다.


PR created automatically by Jules for task 12341394679647547712 started by @seonghobae

@google-labs-jules

Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant