Skip to content

West Midlands | 26 March SDC | Iswat Bello | Sprint 1 | Purple Forest/bug report/Hashtag slowing down my browser#215

Open
Iswanna wants to merge 1 commit into
CodeYourFuture:mainfrom
Iswanna:Purple-Forest/bug-report/Hashtag-slowing-down-my-browser
Open

West Midlands | 26 March SDC | Iswat Bello | Sprint 1 | Purple Forest/bug report/Hashtag slowing down my browser#215
Iswanna wants to merge 1 commit into
CodeYourFuture:mainfrom
Iswanna:Purple-Forest/bug-report/Hashtag-slowing-down-my-browser

Conversation

@Iswanna

@Iswanna Iswanna commented Jun 12, 2026

Copy link
Copy Markdown

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

This PR resolves the infinite flickering issue on hashtag pages by implementing a guard clause within the hashtagView function. This prevents a circular logic loop where state updates were triggering redundant route changes and repeated API requests.

The Problem: When visiting a hashtag page, the application became stuck in an infinite loop. The screen would flash blank repeatedly, and the Network tab showed continuous API requests to the same endpoint.

The Discovery: I traced the logic through index.mjs, router.mjs, and hashtag.mjs.

  • The Loop: The hashtagView was calling the API every time it ran. The API updated the state, which triggered a state-change event. The index.mjs listener heard this event and told the router to run again, starting the cycle over.
  • The Flicker: The destroy() function was being called at the start of every loop iteration, wiping the screen before the data could be rendered.

The Fix:

  • Implemented a Guard Clause in hashtagView.mjs.
  • The Logic: The function now checks if the requested hashtag is already the currentHashtag in the state.
  • It only clears the screen and calls the API if the user is navigating to a new hashtag.

Verification:

  • Confirmed that the flickering has stopped.
  • Verified in the Network tab that only one API request is made per hashtag navigation.

Added a guard clause to hashtagView to check if the hashtag has changed
before clearing the UI and fetching data. This stops the infinite loop
caused by state updates triggering route changes.
@Iswanna Iswanna changed the title fix: prevent infinite rendering loop on hashtag page West Midlands | 26 March SDC | Iswat Bello | Sprint 1 | Purple Forest/bug report/Hashtag slowing down my browser Jun 12, 2026
@Iswanna Iswanna added 📅 Sprint 1 Assigned during Sprint 1 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Legacy-Code The name of the module. labels Jun 12, 2026
@nedssoft nedssoft added Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 24, 2026

@nedssoft nedssoft left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great detective work, Iswat — tracing the flicker through index.mjsrouter.mjshashtag.mjs and naming the API → state-change → re-render → API cycle is genuinely tricky, and your guard breaks it cleanly. 👏 One question purely to deepen the win (not a change): your guard compares against state.currentHashtag — what sets that value, and at what point in the cycle? Being able to point to exactly where the loop is broken is the real prize.

@nedssoft nedssoft added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels Jun 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed. Module-Legacy-Code The name of the module. 📅 Sprint 1 Assigned during Sprint 1 of this module

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

2 participants