Thanks Jason.
Regarding the missing dependencies, it's actually intended!
Rather, putting more variables in the dependencies is what brings the undesirable behavior sometimes 😅. Like in the codes, I want to run the function only when the page changes, so I could either put router.asPath or Component, and if I also include currentUser.isLoading, it will run an additional time, which is undesirable.
As for the isAuthenticated, it is not a memoized variable, so putting it in the dependencies will actually result in the useEffect being run for every render, which is not what we want (never put an unmemoized variable in useEffect).
But of course, my logic here assumes that the user will be redirected to another page after logging in, which might not always be the case.
Jason Chen
Nothing is true, everything is permitted.
Hi, I enjoy your posts, always clear and insightful!😎
In the code snippet with
useEffect, I wondered if missing dependencies could cause unexpected behavior?useEffect(() => { if (!isAuthenticated && !currentUser.isLoading) { router.push("/"); // or login page } }, // missing isAuthenticated and // currentUser.isLoading [Component, isAuthenticated, currentUser.isLoading]);Great job, and eager for your future posts!