How to initialize state with a function returning localstored value on window's load event on Nextjs?

Question

Now, I'm having an error window is not defined on initialize a variable on NextJs. I want to know the last time the site was accessed when the window loads. That time is in localstorage.

EDIT

Notice that I'm using Function Component

import { useState } from "react";
import LoadingScreen from "../components/LoadingScreen";
import { AppContext } from "../contexts/AppContext";

function MyApp({ Component, pageProps }) {
const [deltaTime, setDeltaTime] = useState(() => {
    if (typeof window !== undefined) {
      window.onload = () => {
        let lastTimeLoaded =
          localStorage.getItem("@services_site/loadingTime") || null;

        deltaTime = new Date() - 1000 * 20 - new Date(lastTimeLoaded);
        localStorage.setItem("@services_site/loadingTime",new Date());

        console.log("deltaTime is", deltaTime);
        return deltaTime;
      };
    }
    return 0;
  });

  return (
    <>
      {deltaTime < 0 && <LoadingScreen />}
      <AppContext.Provider value={deltaTime}>
        <Component {...pageProps} />
      </AppContext.Provider>
    </>
  );
}

Answer 1

So I moved the code to useEffect

    if (typeof window !== undefined) {
      window.onload = () => {
        let lastTimeLoaded =
          localStorage.getItem("@services_site/loadingTime") || null;
        
        let delta = new Date() - 1000 * 20 - new Date(lastTimeLoaded);
        console.log("deltaTime is", delta);

        localStorage.setItem("@services_site/loadingTime", new Date());

        setDeltaTime(delta);
      };
    }
  }, [deltaTime]);```