fix: track useTechNews mount state via ref + abort stale fetches (#144) - #153
Open
vedant7007 wants to merge 1 commit into
Open
fix: track useTechNews mount state via ref + abort stale fetches (#144)#153vedant7007 wants to merge 1 commit into
vedant7007 wants to merge 1 commit into
Conversation
…abort (AshutoshDash1999#144) refreshNews previously called `fetchNews(true, true)` — the second arg (isMounted) was hardcoded true at the call site, so a refresh triggered right before unmount still wrote state, and a second refresh fired before the first resolved could be overwritten by the slower older request when it finally landed. - track mount state via a hook-level useRef and flip it in the effect cleanup, matching the mount-guard pattern already used in use-browser-bookmarks.ts - keep an AbortController ref so a new refresh cancels the in-flight fetch, guaranteeing the newest request wins even under bursty user taps or slow networks; silently swallow the resulting AbortError so the UI doesn't flash an error state on a superseded request - wrap fetchNews and refreshNews in useCallback for stable identity so consumers don't rebind effects on every render Fixes AshutoshDash1999#144
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
useTechNews.refreshNews()was callingfetchNews(true, true)— the second arg (isMounted) was hardcoded totrueat the call site, so a refresh triggered right before unmount kept writing state, and two rapid refreshes could race such that the older, slower fetch overwrote the newer one when it finally resolved.What changed
isMountedfor a hook-leveluseRefthat flips tofalsein the effect cleanup — same pattern used byuseBrowserBookmarks.tsin this repoAbortControllerref: a new fetch aborts the in-flight one so the newest request always wins under bursty taps or slow networksAbortErrorin the catch so a superseded fetch doesn't flash the UI intoerrorstatefetchNewsandrefreshNewsinuseCallbackso consumers get stable identities and don't rebind effects on every renderTest plan
npm run typecheckcleannpx eslint src/hooks/use-tech-news.tscleansetNewson unmounted componentfetchNewsdirectly — greppable viagrep -rn "fetchNews" srcFixes #144