Why isn't beforeLoad used instead of useLayoutEffect in the React Example: Kitchen Sink React Query File Based?

[iwilson001]

I am working in an app where I was getting some crazy redirects from my login page and one thing I noticed was that one of the spots it was stemming from was based on the example from the docs, 'React Example: Kitchen Sink React Query File Based' specifically, the login.tsx file.

A redirect is performed in useLayoutEffect if the user is signed in and there is a valid redirect search from Route.useSearch().

In my own implementation, I removed the useLayoutEffect and put some of the "already logged in redirect" logic into beforeLoad as it made sense to put it there. This not only seemed to solve my issue, but also prevented the login page from showing before the redirect. Am I missing something that is gained from the useLayoutEffect? Am I using beforeLoad incorrectly?

Any thoughts would be appreciated!

Here is a link to the example in the docs for reference

[iwilson001]

From what I've gathered from continued exploration, the answer to my question is basically that beforeLoad should be used for auth when we never want the user to hit the page at all while useLayoutEffect can be used when we want the user to hit the page, but redirect ASAP.

Something else I learned along the way is the the reason for useLayoutEffect vs useEffect is what I mentioned, redirecting ASAP vs letting the browser load everything and then do whatever is in the useEffect.

I still don't know why I'm getting crazy redirects lol, but at least I know a little more about what I'm looking at