Skip to content

⚡ Bolt: [performance improvement] Recharts 데이터 메모이제이션으로 불필요한 리렌더링 방지#234

Open
seonghobae wants to merge 3 commits into
developmentalfrom
bolt/recharts-memoization-13968008801286614046
Open

⚡ Bolt: [performance improvement] Recharts 데이터 메모이제이션으로 불필요한 리렌더링 방지#234
seonghobae wants to merge 3 commits into
developmentalfrom
bolt/recharts-memoization-13968008801286614046

Conversation

@seonghobae

Copy link
Copy Markdown

💡 What (무엇을 했나요?)
@argos/web 패키지의 대시보드 컴포넌트 5곳(daily-cache-reads-chart, daily-work-chart, model-share-chart, skill-frequency-chart, session-timeline-chart)에서 차트에 전달할 데이터를 가공(map, reduce, slice 등)할 때 useMemo를 사용하도록 수정했습니다.

🎯 Why (왜 했나요?)
React 컴포넌트의 렌더링마다 배열 내장 함수(map 등)를 호출하면 매번 새로운 배열 참조가 생성됩니다. Recharts와 같은 차트 라이브러리는 깊은 객체 비교를 수행하거나 참조가 바뀔 때 전체 차트를 리렌더링할 수 있으므로, 큰 데이터 세트를 다룰 때 성능 저하(불필요한 리렌더링 및 메인 스레드 블로킹)의 원인이 됩니다.

📊 Impact (기대되는 효과)

  • 대시보드 내 여러 차트들이 상위 컴포넌트 렌더링 시 불필요하게 리렌더링되는 빈도가 줄어들어 체감 반응속도 향상
  • useMemo를 통한 캐싱으로 CPU 연산 절감 및 렌더링 시간 단축 (불필요한 Recharts 리렌더링 제거)

🔬 Measurement (검증 방법)

  • pnpm --filter @argos/web run typecheckpnpm --filter @argos/web run lint 모두 통과 확인
  • 전체 워크스페이스의 테스트 코드 정상 통과 (pnpm test --recursive)

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

packages/web/src/components/dashboard 내의 5개 컴포넌트(`daily-cache-reads-chart.tsx`, `daily-work-chart.tsx`, `model-share-chart.tsx`, `skill-frequency-chart.tsx`, `session-timeline-chart.tsx`)에서 렌더링 시마다 불필요하게 객체 배열을 재생성하여 Recharts에 전달하던 부분을 `useMemo`로 감싸 불필요한 연산과 리렌더링을 방지했습니다.
@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