React - Load component after useContext returns value - reactjs

Question

So I have Dashboard component which should display currentUsers info.
I keep my currentUser in global context/state.
The problem is when Dashboard component renders FIRST time currentUser is null even tho user is actually logged in. Because of that I get null error at line 14 or if I comment dashboard states the if statement on line 22 will happen and it will redirect me even if user is logged in.
Is there a way to await for isLoggedInFunction to finish and then do the logic in Dashboard component?
In App.js
export const CurrentUserContext = React.createContext(null); // Global Context
const [currentUser, setCurrentUser] = useState(null); // Global State
// Setting current user
useEffect(() => {
setCurrentUser(isLoggedIn()).catch(err => console.log(err));
}, []);
// IsLoggedIn Method
export function isLoggedIn() {
return localStorage.getItem('user') === null ?
null :
JSON.parse(localStorage.getItem('user'));
}
<CurrentUserContext.Provider value={{ currentUser, setCurrentUser }}> // Provider

Answer 1

You can set the default value for the user to avoid the first error.
In this case you can change your Dashboard like this:
/* ... */
const {
currentUser = {
isLoggedIn: false,
firstName: 'first name'
}
} = useContext(CurrentUserContext);
const [firstName, setFirstName] = useState(currentUser.firstName);
/* ... */
if (!currentUser.isLoggedIn) {
return <Redirect to={'/login'}/>;
}
/* ... */
To solve the second problem, you need to check if your localStorage actually contains the user field after authorization.

Answer 2

I fixed both problems by doing this.
const [currentUser, setCurrentUser] = useState(null); // Replaced this line with next line
const [currentUser, setCurrentUser] = useState(() => isLoggedIn());
And I removed useeffect since I don't need it anymore.
// Setting current user
useEffect(() => {
setCurrentUser(isLoggedIn()).catch(err => console.log(err));
}, []);