Recoil not persisting state, when refreshing page

Question

I have some state with React recoil, but whenever the page is manually refreshed, the recoil state is reset.

Is this normal behaviour, because i know other state management libraries like flux and react-redux will do this.

Is it best practise to save it into localStorage to actually have it persisted in the browser (because localStorage is also a synchronous api, so that could definitely also cause some issues.)

Even though it is a fairly new library, is there some way to persist state even on manual page refreshes?

Answer 1

I have some state with React recoil, but whenever the page is manually refreshed, the recoil state is reset.

Yes, it's normal behavior.

Is this normal behavior because I know other state management libraries like flux and react-redux will do this.

Yes, only a subset of the state management libraries persists the data themselves. It's more common to find external libraries that do that or custom solutions.

Is it best practice to save it into localStorage to actually have it persisted in the browser (because localStorage is also asynchronous API, so that could definitely also cause some issues.)

It depends on your needs:

• do you want to offer a full offline experience? Go for it
• are you concerned by the performance implications in case of big amount of data? You could consider indexedDB
• are you just trying to persist some auth tokens? Probably sessionStorage could be the right solution
• does the server need to know the stored data? You could opt for cookies

Let's say that without knowing your use case it's hard to suggest something 😉

Even though it is a fairly new library, is there some way to persist state even on manual page refreshes?

Yes, with useRecoilTransactionObserver_UNSTABLE you could get notified of every Recoil change and persisting the data. Then, with RecoilRoot' initializeState you could restore it. As you said, the library is new and the APIs could change rapidly in the next months 😉

Answer 2

You could use recoil-persist library to persist state to localStorage.

Here how you could use it:

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

const counterState = atom({
  key: 'count',
  default: 0,
  effects_UNSTABLE: [persistAtom],
})

Answer 3

This works nicely, from the docs here.

Any change to the order state gets written to localStorage, and the value from localStorage is read into the order state on refresh.

// define this function somewhere
const localStorageEffect = key => ({setSelf, onSet}) => {
  const savedValue = localStorage.getItem(key)
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue))
  }
  onSet(newValue => {
    localStorage.setItem(key, JSON.stringify(newValue))
  })
}

// this is an example state atom
export const orderState = atom({
  key: 'orderState',
  default: {
    store: {}, // { id, name, phone, email, address }
    items: {}, // { [itemId]: { id, name, sizeTable, quantity, size } }
    contact: { deliveryOption: 'ship' }, // { name, email, phone, address, city, state, zipcode, promotions, deliveryOption }
  },
  // add these lines to your state atom, 
  // with the localStorage key you want to use
  effects_UNSTABLE: [
    localStorageEffect('order'),
  ],
})