Do not render React Component on fresh page load or refresh

Question

I'm looking for a way to have React not render a component if the page was just loaded or refreshed. The component should only render if the user is browsing from page to page within the single-page application.

I've tried using window.document.readyState to detect this but that's been hit or miss.

Magnus Engdal · Accepted Answer · 2015-11-25 16:33:44Z

2

You could use Session Storage in the browser like this

if(!sessionStorage.active || sessionStorage.active == window.location.href) {
    // First visit or refresh
} else {
    // Render component
}
sessionStorage.active = window.location.href;

When the user first visits the page, sessionStorage.active will not be set and it will go to // First visit or refresh.

If the user refreshes the page, sessionStorage.active will be set but it will also equal the current url and go to // First visit or refresh.

If the user visits the page from another page within the site, sessionStorage.active will be set and it won't match window.location.href since it's currently set to the previous visited pages url. Therefore it will go to // Render component.

There might be some quirks with this solution that has to be solved for special use cases, but hopefully you have a good starting point.

edited Nov 25, 2015 at 16:33

answered Nov 25, 2015 at 16:28

Magnus Engdal

5,6343 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Do not render React Component on fresh page load or refresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related