I’m trying to make the menu inaccessible if the user doesn’t have access.

After the user login, it will return ACL from API and then I store it in locastorage, and from there I only show menus that the user has from locastorage, also show a 404 when user doesn’t have access.

The problem is, at first localstorage returns null, but after a second the data is there.
I create an interval to update the data but it seems weird to me (but actually I want to avoid ts error because it says that it has ‘any’ value).

Is there a better way to consume localstorage for this case?

Thanks in advance

useEffect(() => {
    const interval = setInterval(() => {
      const userInfo: string | null = localStorage.getItem('userInfo');

      if (userInfo) {
        try {
          const userInfoJson: UserInfo = JSON.parse(userInfo);

          if (userInfoJson?.acl) {
            setUserAcl(userInfoJson.acl);
            clearInterval(interval);
          } else if (userInfoJson?.aclCustom) {
            setUserAcl(userInfoJson.aclCustom);
            clearInterval(interval);
          }
        } catch (e) {
          console.error('Failed to parse userInfo', e);
          setUserAcl([]);
          clearInterval(interval);
        }
      }
    }, 200);

    return () => clearInterval(interval);
  }, []);