fix(lotw): stop /lotw page from refetching in an infinite loop#208
Merged
Conversation
The /lotw page hammered /api/stations, /api/lotw/upload, and
/api/lotw/download continuously because of a triple-cycle dependency
tangle:
1. useEffect deps include `loading` and `loadData`
2. loadData calls setLoading(true) on entry, setLoading(false) on
finish — flipping `loading` each call retriggers useEffect
3. loadData's useCallback deps include `selectedStation`, and
loadData calls setSelectedStation(...) to pick a default — the
state change reissues loadData's identity, which is also a dep
of useEffect
Each of #1 or #2/#3 alone is enough to loop. Combined, the page
re-rendered constantly and hit three API endpoints on each pass.
Fix:
- loadData useCallback deps = [] (no longer a function of selectedStation)
- setSelectedStation uses a functional updater so it can derive the
default from the freshly-fetched stations without depending on
selectedStation in deps
- useEffect waits on UserContext's `loading` (not this component's),
so the auth gate doesn't redirect during the initial /api/user check
Net: page mounts → one fetch round → idle. Manual refresh button and
post-action reloads still call loadData explicitly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The
/lotwpage hammered/api/stations,/api/lotw/upload, and/api/lotw/downloadcontinuously after mount. User reported it visually in Network tab; root cause is a triple-cycle React deps tangle:useEffectdeps includedloadingandloadData.loadDatacallssetLoading(true)on entry andsetLoading(false)on finish — every flip retriggers the effect.loadData'suseCallbackdeps includedselectedStation, andloadDataitself calledsetSelectedStation(...)to pick a default — that state change reissuesloadData's identity, which is also a useEffect dep.Each of #1 or #2/#3 alone produces an infinite loop. Combined: continuous refetches.
Fix
loadDatauseCallbackdeps now[]. The default-station selection usessetSelectedStation((prev) => prev || derive(fetched))so it doesn't depend on the currentselectedStationvalue.useEffectno longer depends on this component'sloading— only onuser,userLoadingfromUserContext,router, and the now-stableloadData.UserContext.loadingso it doesn't bounce to/loginduring the initial/api/usercheck (userisnullboth pre-resolve and when unauthenticated).Net: page mounts → exactly one fetch round → idle. The manual Refresh button and post-action reloads still call
loadDataexplicitly.Audit
Grepped the rest of
src/app/**/page.tsxfor the same pattern —/lotwwas the only page with this exact tangle, so this is a one-file change.Test plan
npm run typecheckcleannpm run lintclean/lotwwith DevTools → Network filtered tolotw|stationsand confirm only one round of requests fires on mount; further requests only happen when clicking Refresh or after Upload/Download actions.🤖 Generated with Claude Code