⚡ Bolt: React Flow 렌더링 최적화를 위한 파생 상태 WeakMap 캐싱 - #583
Conversation
- React Flow의 `visibleNodes` 파생 상태 생성 시 검색 필터에 따른 `isDimmed`, `isHighlighted` 처리가 매 렌더링마다 노드의 `data` 객체를 새로 생성하여 `TableNode`의 `React.memo`(prev.data === next.data)를 깨뜨리는 성능 병목 현상을 해결했습니다. - 검색 결과로 파생된 상태를 `WeakMap`에 원본 `node.data`를 키로 하여 캐싱하도록 수정했습니다. - 이를 통해 노드 드래그 등 빈번한 그래프 업데이트(60fps) 상황에서도 `data` 객체의 동일성이 유지되어 불필요한 전체 렌더링을 방지합니다.
|
👋 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. |
![opencode-agent[bot]](https://avatars.githubusercontent.com/in/1549082?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
OpenCode cannot approve yet because required coverage evidence did not pass.
Review outcome
1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence
-
Problem: The required coverage-evidence job result was
failure, so OpenCode cannot establish approval sufficiency for this head. -
Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.
-
Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports
successwith required evidence or explicit no-source not-applicable evidence. -
Regression test: Keep the approval branch checking
needs.coverage-evidence.result == successbefore posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present. -
Result: REQUEST_CHANGES
-
Reason: coverage-evidence result was
failure, so required test/docstring evidence was not proven for current head1e4147d1b515f9794e236fb220aa1cbc68ef0df5. -
Head SHA:
1e4147d1b515f9794e236fb220aa1cbc68ef0df5 -
Workflow run: 29617033830
-
Workflow attempt: 1
Coverage evidence
Coverage evidence job did not run or did not publish coverage evidence.
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: bolt.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: bolt.md"]
R1 --> V1["required checks"]
Evidence --> S2["Frontend: App.tsx"]
S2 --> I2["browser runtime and bundle"]
I2 --> R2["Review risk: Frontend: App.tsx"]
R2 --> V2["frontend tests"]
OpenCode Review Overview
Pull request overviewOpenCode cannot approve yet because required coverage evidence did not pass. Review outcome1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence
Coverage evidenceCoverage evidence job did not run or did not publish coverage evidence. Changed-File Evidence Mapflowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: bolt.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: bolt.md"]
R1 --> V1["required checks"]
Evidence --> S2["Frontend: App.tsx"]
S2 --> I2["browser runtime and bundle"]
I2 --> R2["Review risk: Frontend: App.tsx"]
R2 --> V2["frontend tests"]
|
1 participant
⚡ Bolt: 파생 상태에서 React Flow
data객체의 참조 동일성 유지 (WeakMap 활용)💡 What:
frontend/src/App.tsx에서 노드 검색 시 필터 조건(isDimmed,isHighlighted)을 입히는 로직을 수정했습니다. 매 렌더링마다 새로운data객체를 반환하던 기존의.map()대신, 원본node.data를 참조 키로 하는WeakMap을 활용하여 검색어 또는 매칭된 노드가 변경되지 않는 한 동일한data객체 참조를 반환하도록 최적화했습니다.🎯 Why:
React Flow는 노드의 위치나 선택 상태가 변할 때(예: 드래그) 렌더링을 유발하지만, 내부
data객체는 기본적으로 변경하지 않습니다. 그러나 검색 필터 때문에 파생 상태(visibleNodes)를 새로 만들며 매번{ ...node.data, isDimmed }를 할당하면, React Flow와TableNode에 걸려있던React.memo의 얕은 비교가 깨져 모든 노드에 대해 깊은 비교나 불필요한 전체 리렌더링이 발생합니다. 이는 노드가 많을 때 드래그 프레임 드랍을 유발합니다.📊 Impact:
TableNode의 리렌더링이 대폭 감소(O(N) 리렌더링 방지).🔬 Measurement:
pnpm run test --coverage통과).PR created automatically by Jules for task 17679468414726510499 started by @seonghobae