⚡ Bolt: React Flow 렌더링 성능 최적화

[seonghobae]

💡 What: React Flow visibleNodes 생성 과정에서 노드 데이터를 매번 새로 할당하던 문제를 WeakMap 캐싱으로 해결했습니다.
🎯 Why: 노드를 드래그하거나 위치를 조정할 때 초당 60프레임으로 렌더링이 발생하는데, 데이터 객체가 매번 재생성되면 React.memo의 캐시(prev.data === next.data)가 무효화되어 다이어그램 내 수백 개의 노드가 불필요하게 리렌더링되며 프레임 드랍이 발생합니다.
📊 Impact: 검색 상태가 켜져 있을 때도 드래그 중인 단일 노드만 리렌더링되게 하여 React 렌더링 부하를 대폭 줄이고 60fps 성능을 유지하게 합니다.
🔬 Measurement: frontend/ 경로에서 100% 테스트 커버리지를 성공적으로 통과했습니다.

---

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

[google-labs-jules]

👋 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.

[Copilot]

Pull request overview

React Flow에서 검색 필터가 활성화된 상태로 60fps 드래그 업데이트가 발생할 때 visibleNodes 파생 과정에서 node.data 객체가 매 프레임 새로 생성되어 memoization(특히 prev.data === next.data fast-path)이 깨지는 문제를, 모듈 스코프 WeakMap 캐싱으로 해결하는 성능 최적화 PR입니다.

Changes:

• visibleNodes 생성 시 node.data를 매번 spread로 재할당하지 않고, (원본 data 참조, highlight 상태) 조합별로 decorated data를 WeakMap에 캐싱하여 객체 identity를 보존
• 커버리지 테스트에서 “열기” 버튼 렌더 타이밍에 대한 waitFor를 추가해 안정성 강화
• 성능 최적화 학습/액션을 .jules/bolt.md에 기록

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
frontend/src/App.tsx	검색 상태에서 visibleNodes 파생 시 node.data decorated 객체를 WeakMap으로 캐싱해 drag 중 불필요한 렌더/비교 비용을 줄임
frontend/src/App.coverage.test.tsx	다이어그램 화면 전환 후 “열기” 버튼 렌더를 기다리도록 보강해 테스트 플래키 감소
.jules/bolt.md	React Flow 객체 identity 보존을 통한 60fps 드래그 성능 최적화 학습/가이드 기록 추가

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.