Save some data from localstorage

[MR-Mostafa]

Hello
I had a question. I want to use SWR to save an API (Not All) in localstorage and then check next time if there is localstorage (and expire date id valid), so that the API will not be called and localstorage data will be restored.
How can I do this?
Unfortunately, I did not find a specific article on this

To achieve this, I created the following hook:

import { useLocalStorage } from '@mantine/hooks';

import { AxiosResponse } from 'axios';
import useSWRImmutable from 'swr/immutable';

interface IProps {
   url: string;
   fetcher: (url: string) => Promise<AxiosResponse<any, any>>;
   storageName: string;
}

type Data = {
   id: number;
   name: string;
   username: string;
   email: string;
   address: {
      street: string;
      suite: string;
      city: string;
      zipcode: string;
      geo: {
         lat: string;
         lng: string;
      };
   };
   phone: string;
   website: string;
   company: {
      name: string;
      catchPhrase: string;
      bs: string;
   };
};

type LocalStorage<T> = { data: T[]; exp: number };

interface IReturn {
   data: Data[] | AxiosResponse<Data[], any> | undefined;
   error: any;
}

const useSwrWithLocalStorage = ({ url, fetcher, storageName }: IProps): IReturn => {
   const [localStorage, setLocalStorage] = useLocalStorage({
      key: storageName,
      defaultValue: {} as LocalStorage<Data[]>,
   });

   const isValidStorage = localStorage && localStorage?.data?.length !== 0 && localStorage?.exp && new Date(localStorage?.exp) > new Date();

   const { data, error } = useSWRImmutable(!!isValidStorage ? null : url, fetcher, {
      onSuccess: (newData) => {
         const OneDay = 24 * 60 * 60 * 1000;
         console.log(newData);

         setLocalStorage({ data: [...newData.data], exp: Date.now() + OneDay * 7 });

         return newData;
      },
   });

   if (!!isValidStorage) {
      console.log('data load from localStorage');
   } else {
      console.log('data load from API');
   }

   return {
      data: !!isValidStorage ? localStorage.data : data ? data.data : undefined,
      error,
   };
};

export default useSwrWithLocalStorage;

But when i use this hook, An error has occurred. (in nextjs)

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Where is the problem with the code I wrote?
Thank you for your help

[swand0g]

Think your issue could be with calling setLocalStorage within the hook. I would personally rewrite the function to check localStorage without a hook, and just check and set with the standard localStorage API

But you could also look into using localStorage itself as a custom cache provider so you don't have to write any additional localStorage logic into the hook