Link to this headingContext
useState React hook is great for state that should be freshly initialized on every visit, but what about for state that should be persisted between sessions?
A good example of this is filters. If I set a filter to sort based on price instead of newest items, that value should "stick", so that if I come back to this site in a week, it remembers that I want to sort by price.
useStickyState hook works just like
useState, except it backs up to (and restores from) localStorage.
Note that I've written a full post about this, with a lot more context. If you're curious to dig deeper, check it out here:
Persisting React State in localStorage
A deep dive into creating a “useStickyState” hook, for easy-breezy persisted state.
Link to this headingUsage
It's used just like
React.useState, except it takes two arguments: a default value, and a key:
The second argument,
key, will be used as the localStorage key. It's important that each
useStickyState instance uses a unique value.
Link to this headingWarnings
This hook is not SSR-safe—if you use SSR, or a framework that makes use of it (eg. Gatsby, Next.js), you'll get an error with this hook as-is.
This is not an easy problem to solve; when the app is rendered on the server, we don't have access to the user's local-storage!
The easiest solution would be to only use this hook in client-side components. The useHasMounted hook will come in handy here!
I share more about this challenge in my blog post, The Perils of Rehydration.