Skip to content

Conversation

Ala-Ben-Aissia
Copy link
Contributor

@Ala-Ben-Aissia Ala-Ben-Aissia commented Aug 17, 2025

Summary

This PR updates the exercise instructions / solution to address a performance bug that could freeze the UI when repeatedly pressing the back/forward navigation buttons.

The Problem

Previously, every popstate update including those already served from cache was wrapped in startTransition. When the back/forward buttons were spammed, React’s concurrent scheduler queued up a large number of unnecessary transitions, causing heavy reconciliation work and freezing the browser tab.

The Fix

The instructional comments in now clarify the correct handling for each case:

  • Cache hits: Update state directly (no transition).
  • Cache misses: Fetch new content and wrap the state update in startTransition.

This distinction ensures the UI stays responsive, even under rapid navigation.

@Ala-Ben-Aissia Ala-Ben-Aissia force-pushed the main branch 2 times, most recently from 94ec0aa to 4181f30 Compare August 17, 2025 20:30
@Ala-Ben-Aissia Ala-Ben-Aissia changed the title Fix Tab Freeze in Popstate Handler by Avoiding startTransition for Cached Hits Fix tab freeze during rapid back/forward by avoiding startTransition on popstate cache hits Aug 17, 2025
@kentcdodds
Copy link
Member

Interesting. Do we have this problem before this exercise as well? I think we should probably update the instructions in the problem version of this exercise step to make sure that people avoid this issue. Would you like to make an update to the pull request to call out for that?

@kentcdodds
Copy link
Member

kentcdodds commented Aug 18, 2025

Thank you for your interest in contributing back!

@Ala-Ben-Aissia Ala-Ben-Aissia changed the title Fix tab freeze during rapid back/forward by avoiding startTransition on popstate cache hits Docs: Clarify popstate handling to prevent UI freeze on navigation spam Aug 19, 2025
@Ala-Ben-Aissia Ala-Ben-Aissia force-pushed the main branch 2 times, most recently from 13fd8d9 to 7e40e8d Compare August 19, 2025 10:46
@Ala-Ben-Aissia
Copy link
Contributor Author

Ala-Ben-Aissia commented Aug 19, 2025

Thanks for the great feedback, Kent! You're right about the UI freeze - it only happens in the caching exercise because that's where we actually reuse cached content.
I've tweaked the instructions + solution to make the distinction between cache hits and misses clearer, which should help avoid the issue. Let me know how it looks!

@kentcdodds
Copy link
Member

Thank you for this!

@kentcdodds kentcdodds merged commit 0f92779 into epicweb-dev:main Aug 19, 2025
@Ala-Ben-Aissia
Copy link
Contributor Author

You're welcome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants