⚡ Bolt: [performance improvement] Memoize Recharts data transformations#226
⚡ Bolt: [performance improvement] Memoize Recharts data transformations#226seonghobae wants to merge 3 commits into
Conversation
- Wrapped data generation in `useMemo` hooks for 8 dashboard chart components. - Resolves potential UI jank and unneeded re-renders when the data arrays recreate references.
|
👋 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. |
- Wrapped data generation in `useMemo` hooks for 8 dashboard chart components. - Fixed a duplicate `useMemo` import in `weekly-flow-chart.tsx`. - Resolves potential UI jank and unneeded re-renders when the data arrays recreate references.
1 participant
💡 What (무엇을):
대시보드의 Recharts 차트 컴포넌트(
DailyWorkChart,ModelShareChart,RankedBarChart,TokenUsageChart,WeeklyFlowChart,DailyCacheReadsChart,SkillFrequencyChart,SessionTimelineChart)에서 데이터 변환 로직을useMemo로 감싸도록 변경했습니다.🎯 Why (왜):
기존에는 컴포넌트 렌더링 시마다
Array.map또는Array.reduce를 통해 새로운 배열 참조가 생성되었습니다. 이 새로운 참조가 Recharts 컴포넌트에dataprop으로 전달되면, 실제 데이터 내용이 변경되지 않았음에도 불구하고 Recharts가 내부적으로 값비싼 리렌더링을 수행하게 되어 잠재적인 UI 버벅임(jank)이 발생할 수 있습니다.📊 Impact (효과):
차트의 기반 데이터(props로 전달되는
data)가 변경되지 않는 한useMemo를 통해 캐싱된 배열 참조를 유지함으로써, 불필요한 Recharts 리렌더링과 CPU 연산을 크게 줄여 대시보드 렌더링 성능을 개선합니다.🔬 Measurement (측정 방법):
React Profiler를 통해 대시보드 내 상위 컴포넌트가 리렌더링될 때 차트 컴포넌트들이 불필요하게 리렌더링되는 빈도가 줄어들었는지 확인할 수 있습니다.
PR created automatically by Jules for task 4534843326879815321 started by @seonghobae