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>
    </>
  );
}

Move the fetch to a `useEffect()`. Nextjs won't run `useEffect()` server side, so window will exist. — pilchard, Feb 19 '21 at 22:11
@pilchard Yes, I moved it and it works. Many thanks. Now I have an unexpected behavior, when I pass the deltaTime to page Components, his value is 0 and not the created when window loads. — Romualdo Arrechea Hernández, Feb 20 '21 at 12:44
When page loads, it shows the right value. That behavior is on the child component, where is index.js, not on _app.js. I use useEffect on the index.js page but not working. — Romualdo Arrechea Hernández, Feb 20 '21 at 12:52

score 0 · Answer 1 · answered Feb 20 '21 at 12:50

0

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]);```

answered Feb 20 '21 at 12:50

Romualdo Arrechea Hernández

409
1
6
16

You need to remove the window check and the `window.onload` as it won't fire as you expect. Just put your local storage logic directly in the useEffect. – pilchard Feb 20 '21 at 12:59
on _app.js ```useEffect(() => { window.onload = () => { let lastTimeLoaded = localStorage.getItem("@romualdo_ah_services/loadingTime") || null; let delta = new Date() - 1000 * 20 - new Date(lastTimeLoaded); console.log("deltaTime is", delta); localStorage.setItem("@romualdo_ah_services/loadingTime", new Date()); setDeltaTime(delta); }; }, [deltaTime]); ``` – Romualdo Arrechea Hernández Feb 20 '21 at 13:24

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

1 Answers1