mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-02 10:31:04 +08:00
0ec1c6a550
Root cause: ComparisonChart was calling useSWR hooks dynamically inside a .map() loop, which violates React's Rules of Hooks. When the traders array length changed (e.g., from 0 to 2, or during initial load), the number of hook calls would change between renders, triggering React Error #310. Previous code: ```tsx const traderHistories = traders.map((trader) => { return useSWR(`equity-history-${trader.trader_id}`, ...); // ❌ Dynamic hooks }); ``` The eslint-disable comment on line 24 was masking this critical issue. Fix: - Always call exactly 2 useSWR hooks (trader1, trader2) unconditionally - Pass null as the key when trader doesn't exist (SWR handles this gracefully) - Build traderHistories array from these fixed hooks - Ensures same number of hooks called on every render This follows React's Rules of Hooks: ✅ Only call hooks at the top level ✅ Don't call hooks inside loops, conditions, or nested functions ✅ Call hooks in the same order every render Fixes: React Error #310 (Rendered more hooks than during previous render) Co-Authored-By: tinkle-community <tinklefund@gmail.com>