Fix hydration error in console

app/components/Layout/UserItem.tsx

@@ -1,9 +1,9 @@
-import { useUserContext } from "~/root";
+import { useUser } from "~/utils";
 import { DiscordIcon } from "../icons/Discord";
 
 // TODO: redirect to same page on login
 export function UserItem() {
-  const user = useUserContext();
+  const user = useUser();
 
   if (user)
     return (

app/root.tsx

@@ -33,20 +33,12 @@ export const loader: LoaderFunction = ({ context }) => {
 
 export let unstable_shouldReload = () => false;
 
-const UserContext = React.createContext<LoggedInUser>(null);
-
-export const useUserContext = () => React.useContext<LoggedInUser>(UserContext);
-
 export default function App() {
-  const data = useLoaderData();
-
   return (
     <Document>
-      <UserContext.Provider value={data}>
-        <Layout>
-          <Outlet />
-        </Layout>
-      </UserContext.Provider>
+      <Layout>
+        <Outlet />
+      </Layout>
     </Document>
   );
 }

app/utils/index.ts

@@ -1,4 +1,4 @@
-import { json } from "remix";
+import { json, useMatches } from "remix";
 
 export const makeTitle = (endOfTitle: string) => `sendou.ink | ${endOfTitle}`;
 
@@ -18,6 +18,12 @@ export type LoggedInUser = {
   discordAvatar: string;
 } | null;
 
+export const useUser = () => {
+  const [root] = useMatches();
+
+  return root.data as LoggedInUser;
+};
+
 export type Serialized<T> = {
   [P in keyof T]: T[P] extends Date ? string : Serialized<T[P]>;
 };