Search code examples
javascriptreactjsbrowsernext.jsbfcache

Correctly handling the BFCache in react


I'm showing a loading screen (state) before redirecting to an external url (payment provider), since they tend to load for a while.

If the user chooses not to complete the payment and goes history.back() (Gesture, back button, ...) the browser pulls the page before from the BFCache, including the loading state, and the user will be "stuck" loading forever.

How would you suggest handling that? Persisted loads can be detected using the pageshow event, but I'm not sure if that is the react way to handle the case.


Solution

  • Persisted loads should be handled manually. In your case you should handle the
    loader state based on the event property persisted from pageshow event handler.