fix(dashboard): prevent infinite API polling loop
useCallback dependency on `symbols` state caused fetchAll to recreate on every call (since it sets symbols), triggering useEffect to restart the interval immediately. Use symbolsRef to break the cycle. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -267,6 +267,7 @@ export default function App() {
|
|||||||
const [lastUpdate, setLastUpdate] = useState(null);
|
const [lastUpdate, setLastUpdate] = useState(null);
|
||||||
|
|
||||||
const [symbols, setSymbols] = useState([]);
|
const [symbols, setSymbols] = useState([]);
|
||||||
|
const symbolsRef = useRef([]);
|
||||||
const [selectedSymbol, setSelectedSymbol] = useState(null); // null = ALL
|
const [selectedSymbol, setSelectedSymbol] = useState(null); // null = ALL
|
||||||
|
|
||||||
const [stats, setStats] = useState({
|
const [stats, setStats] = useState({
|
||||||
@@ -283,7 +284,7 @@ export default function App() {
|
|||||||
/* ── 데이터 폴링 ─────────────────────────────────────────── */
|
/* ── 데이터 폴링 ─────────────────────────────────────────── */
|
||||||
const fetchAll = useCallback(async () => {
|
const fetchAll = useCallback(async () => {
|
||||||
const sym = selectedSymbol ? `?symbol=${selectedSymbol}` : "";
|
const sym = selectedSymbol ? `?symbol=${selectedSymbol}` : "";
|
||||||
const symRequired = selectedSymbol || symbols[0] || "XRPUSDT";
|
const symRequired = selectedSymbol || symbolsRef.current[0] || "XRPUSDT";
|
||||||
|
|
||||||
const [symRes, sRes, pRes, tRes, dRes, cRes] = await Promise.all([
|
const [symRes, sRes, pRes, tRes, dRes, cRes] = await Promise.all([
|
||||||
api("/symbols"),
|
api("/symbols"),
|
||||||
@@ -294,7 +295,10 @@ export default function App() {
|
|||||||
api(`/candles?symbol=${symRequired}&limit=96`),
|
api(`/candles?symbol=${symRequired}&limit=96`),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (symRes?.symbols) setSymbols(symRes.symbols);
|
if (symRes?.symbols) {
|
||||||
|
symbolsRef.current = symRes.symbols;
|
||||||
|
setSymbols(symRes.symbols);
|
||||||
|
}
|
||||||
if (sRes && sRes.total_trades !== undefined) {
|
if (sRes && sRes.total_trades !== undefined) {
|
||||||
setStats(sRes);
|
setStats(sRes);
|
||||||
setIsLive(true);
|
setIsLive(true);
|
||||||
@@ -307,7 +311,7 @@ export default function App() {
|
|||||||
if (tRes?.trades) setTrades(tRes.trades);
|
if (tRes?.trades) setTrades(tRes.trades);
|
||||||
if (dRes?.daily) setDaily(dRes.daily);
|
if (dRes?.daily) setDaily(dRes.daily);
|
||||||
if (cRes?.candles) setCandles(cRes.candles);
|
if (cRes?.candles) setCandles(cRes.candles);
|
||||||
}, [selectedSymbol, symbols]);
|
}, [selectedSymbol]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchAll();
|
fetchAll();
|
||||||
|
|||||||
Reference in New Issue
Block a user