Website crashing when you refresh results or details page

[georgiamshaw]

I enter a postcode and get my results on the results page. If I refresh this, the page still displays but my results have gone (this is on localhost).

[gminova]

This is what happens on our deployed website:

However in browser forward/back buttons works correctly, and all airtable data is still reachable at endpoint: https://generation-change.netlify.com/.netlify/functions/getdata

[georgiamshaw]

What we think is happening is the state gets lost.

Solutions we have been thinking of trying are storing our data in local storage, looking into using the useContext hook, or looking into netlify redirects.

Any suggestions welcome!

[maxgerber]

You're right — as React is a front-end framework your state will not persist between sessions unless you set something up to capture it.

AFAIK useContext will give you the same problem. I'd recommend using the sessionStorage API, which works much like localStorage. However, sessionStorage will only persist so long as your browser is open (including when you refresh), and will delete every time you close your browser.

https://www.robinwieruch.de/local-storage-react

[samjam48]

we could just use more of the router capabilities instead of relying on state and session storage so when you reload the url it works it our from the url.
e.g. {site-name}/details/{project_id}

But if we are keeping all the airtable data in our state as well then it would mean we have to do more specific calls to airtable on every different page or still use session storage for the airtable data...