Description:
I have a website where users can log in and are redirected to the home page upon successful login. On the home page, there’s a profile component in the navbar that allows users to view their profile. However, I’ve noticed that the useEffect hook responsible for loading user data and displaying the profile component is not triggering when the user logs in. As a result, the profile component is not displayed until the page is manually refreshed.
I’ve ensured that all other code is running correctly, and the issue seems to be isolated to the useEffect hook. It’s configured to run on component mount, but it doesn’t execute until the page is refreshed.
What could be causing this behavior, and how can I ensure that the useEffect hook runs properly when the user logs in and is redirected to the home page?
Any insights or suggestions would be greatly appreciated. Thank you!
const [user, setUser] = useState(true)
const [extUser, setExtUser] = useState()
const [menu, setMenu] = useState(false)
console.log("Component is rendering"); // seeing output on a console
useEffect(() => {
console.log("useEffect is getting mounted");
const getUser = localStorage.getItem("user_token");
console.log("Token from localStorage:", getUser); // Log retrieved token
if (getUser) {
setUser(true);
let decodedToken = jwtDecode(getUser);
let somevar = JSON.parse(JSON.stringify(decodedToken));
setExtUser(somevar);
console.log(somevar);
}
}, [user]); // tried removing dependency array but work
{user ? {display the profile here} : (
<button
onClick={() => navigate("/auth")}
className="bg-transparent hover:bg-gray-500 text-black font-bold hover:text-white py-2 px-4 border border-slate-500 hover:border-transparent rounded-lg">Login</button>
)}