useState set method inside useEffect hook not updating till refreching the page - reactjs

Question

I am trying to update a user when a token was changed. I have two hooks which are useToken (deals with token when login and logout events ) and useUser (update the user after any change in token value). I used them inside a HeaderHelper which is a functional component returns a Header Component that accept user, token, setToken and navigate as props. In the latter, I write a function called afterLogin to invoke setToken in the aim of updating the token field and invoke also a navigate hook to redirect to the appropriate route.
The problem is after logging in, the user field did not get any value and stay "null", Although the setToken and useEffect were invoked. To get the result that I aim to get I should to refresh the browser and it's obviously not practical.
quote NOTE: useUser has a token field as a part of its state. and the HeaderHelper has a user and token as a part of its state.
here is the code of useToken Hook:
export const useToken = () => {
const [ token, setToken ] = useState(()=>{
return sessionStorage.getItem('token');
});
function setTokenStorage (newToken) {
sessionStorage.setItem('token', newToken);
setToken(newToken);
}
return [token, setTokenStorage ];
}
here is the code of useUser Hook:
export const useUser = () => {
const [ token ] = useToken();
const getPayloadFromToken = token => {
console.log(token);
const encodedPayload = token.split('.')[1];
console.log(JSON.parse(atob(encodedPayload)), ': encodedPayload');
return JSON.parse(atob(encodedPayload));
}
const [ user, setUser] = useState(()=>{
// console.log('token from user useState', token , '***');
if(!token) {
console.log(token);
return {};
};
// console.log(getPayloadFromToken(token));
return getPayloadFromToken(token);
});
useEffect( ()=>{
console.log('token from user useEffect', token , '***');
if(!token) {
console.log('user will become null');
setUser({});
}else{
console.log(' useEffect ');
setUser(getPayloadFromToken(token));
}
},[token]);
return [user];
}
Here is the code of HeaderHelper Component:
export const HeaderHelper = (props) => {
const [user] = useUser();
const navigate = useNavigate();
const [token, setToken] = useToken();
return <Header navigate={ navigate } token={token} setToken={ setToken } user={ user } {...props}/>
}
Here is the code of Header Component:
class Header extends Component{
constructor (props){
super(props);
this.state = { ... }
}
handleLogin(e){
e.preventDefault();
this.setState({successSingIn : false});
fetch('http://localhost:8000/api/login', {
method: 'POST',
body: JSON.stringify({
"email" : this.email.value,
"password" : this.password.value,
"type" : this.type.value,
}),
headers: { "Content-Type" : "application/json"},
credentials: "same-origin"
}).then(response => {
if (response.ok){
return response;
}else{
const error = new Error('Error ' + response.status + ' : ' + response.statusText);
error.response = response;
throw error;
}
}).then(response => response.json())
.then(response => {
console.log('response from backend: ' + JSON.stringify(response));
if (response.status) {
this.setState({ failToLogIn : '' });
this.afterLogin(response.user.token);
}else{
this.setState({ failToLogIn : 'something wrong, try again with valid information!' });
}
})
.catch(error => {
this.setState({ failToLogIn : 'something wrong' });
console.log('something wrong with login process\n' , error.message)
});
}
}
and here is the code of afterLogin function:
afterLogin = (userToken) => {
this.toggleLoginModel();
console.log('userToken: ', userToken);
this.props.setToken(userToken);
this.props.navigate('/dashboard');
}
Summary: -This is how I think-
-1 the guest make a login request.
-2 afterLogin function invoked after a successfully login.
-3 then, setToken invoked, leads to invoke that function inside useEffect. And cause a re-render for HeaderHelper.
-4 finally, setUser will be invoked and cause a re-render for HeaderHelper.
-5 after all of that a token and user should have values, unfortunately that didn't happen.
So how can I solve this issue?
thank you!

Answer 1

Yeah, looks like each useToken hook maintains its own state. The setToken Header is using is from the useToken whereas nothing updates the token state of the useToken hook that useUsers is using, so the useEffect hook won't retrigger.
What you might try doing is to return the token and setToken from the useToken hook that useUser is using so there's only the one instance.
export const useUser = () => {
const [token, setToken] = useToken();
const getPayloadFromToken = token => {
console.log(token);
const encodedPayload = token.split('.')[1];
console.log(JSON.parse(atob(encodedPayload)), ': encodedPayload');
return JSON.parse(atob(encodedPayload));
}
const [user, setUser] = useState(() => {
// console.log('token from user useState', token , '***');
if (!token) {
console.log(token);
return {};
};
// console.log(getPayloadFromToken(token));
return getPayloadFromToken(token);
});
useEffect( ()=>{
console.log('token from user useEffect', token , '***');
if (!token) {
console.log('user will become null');
setUser({});
} else {
console.log(' useEffect ');
setUser(getPayloadFromToken(token));
}
}, [token]);
return [user, token, setToken];
}
...
export const HeaderHelper = (props) => {
const [user, token, setToken] = useUser();
const navigate = useNavigate();
return (
<Header
{...props}
navigate={navigate}
token={token}
setToken={setToken}
user={user}
/>
);
}