transformData.js

const config = {
  key: '@session',
  transform: {
    in: ({ name }) => ({ name }),
    out: ({ name }) => ({ name, avatarUrl: '' })
  }
}

const useStorage = (state, setState) => {
  const [rehydrated, setRehydrated] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    localforage.getItem(config.key, (err, value) => {
      if (err) {
        setRehydrated(true);
        return setError(err);
      }
      // transform data to persist
      let restoredValue = rehydrated(value);
      if (typeof config.transform?.out === 'function') {
          restoredValue = config.transform.out(restoredValue);
      }
      setState(restoredValue);
      setRehydrated(true);
    });
  }, []);

  useEffect(() => {
    if (isNil(state) || isEmpty(state)) {
      localforage.removeItem(config.key);
    }
    
    // transform persisted data to state
    let data;
    if (typeof config.transform?.in === 'function') {
      data = config.transform.in(state);
    }
    localforage.setItem(config.key, hydrate(data));
  }, [state]);
          
  return {
    rehydrated,
    error,
  };
};