Calling useContext Inside a React Router Loader

A loader function is a plain JavaScript function that runs outside the React component tree, and the Rules of Hooks require hooks to be called only inside function components or custom hooks

AuthContext must be passed as an explicit argument to loader for useContext to resolve it correctly

useContext only works with contexts created via createContext inside the same file, and AuthContext is presumably imported from elsewhere

Loaders execute before React has mounted the provider tree, so AuthContext.Provider's value is always undefined at that point, though the hook call itself is technically valid