Making SessionStorage calls using async await in React

Question

I have a functional Component that has the following code.

import { isUserAuthCheck } from "../../Utils/SessionStorage";

function DefaultPage({ history }) {
  useEffect(() => void (isUserAuthCheck ? history.push("/home") : null));

and in my Utils/SessionStorage, I have the following

export const isUserAuthCheck =
  sessionStorage.getItem("isUserAuthenticated") === "true";
export const getIsUserAuthenticated = sessionStorage.getItem(
  "isUserAuthenticated"
);
export const setValueInSession = (key, value) =>
  sessionStorage.setItem(key, value);

export const setIsUserAuthenticated = str =>
  sessionStorage.setItem("isUserAuthenticated", str);

Problem here is, isUserAuthCheck doesn't seem to update every time there's a change in sessionStorage. How can I make sure that it's getting updated every time there's a change in sessionStorage.

Any help is appreciated.

Answer 1

Because it is not a function. It doesn't fire the checking everytime you call it. You have to make it a function to run the checking AGAIN.

export const isUserAuthCheck = () =>
  sessionStorage.getItem("isUserAuthenticated") === "true";

Or you can update it everytime you set value for isUserAuthenticated, but it is a const so you'd have to change it.

EDIT:

If you want it to be a getter as i mentioned:

Also avoid using "true" or any kind of these things. There is a reason why bool type is available