useStickyState

useStickyState
useStickyState.js
const useStickyState = (defaultValue, key) => {
  const [value, setValue] = React.useState(() => {
    const stickyValue = window.localStorage.getItem(key);
    return stickyValue !== null
      ? JSON.parse(stickyValue)
      : defaultValue;
  });
  
  React.useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

Why?

The 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.

The useStickyState hook works just like useState, except it backs up to (and restores from) localStorage.

Usage

1

How to use it

It's used just like React.useState, except it takes two arguments: a default value, and a key:

const SomeComponent() { 
  const [color, setColor] = useStickyState('blue', 'persisted-color');
}

The second argument, key, will be used as the localStorage key. It's important that each useStickyState instance uses a unique value.

Warning

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 localStorage.

The easiest solution would be to only use this hook in client-side components.