prevent hydration error

src/components/Header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {Link, Navbar, NavbarBrand, NavbarContent, NavbarItem} from '@nextui-org/react';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {usePathname, useRouter} from 'next/navigation';
 import SearchBar from '@/components/SearchBar';
 import Image from 'next/image';
@@ -12,10 +12,17 @@ import {UserDetails} from '@/components/UserDetails';
 export default function Header() {
   const { authenticated , user } = useAuth();
   const router = useRouter();
+  const [ isMounted, setIsMounted ] = useState(false);
 
   const pathname = usePathname() || '';
   const titlepageRegex = /^\/\d+$/;
 
+  // To prevent hydration error when displaying the user details as these are rendered from session storage
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
   return (
     <Navbar maxWidth='xl'>
       <NavbarBrand>
@@ -36,7 +43,7 @@ export default function Header() {
       </NavbarContent> }
       <NavbarContent justify="end">
         <NavbarItem className="lg:flex">
-          { authenticated ? (
+          { authenticated && isMounted ? (
             <>
               <UserDetails name={user?.name ?? ''} className="px-2.5"/>
               <LogoutButton/>

src/hooks/usePersistState.ts

@@ -1,10 +1,13 @@
 import {useEffect, useMemo, useState} from 'react';
 
+// Check if window is defined (i.e. if we are in the browser)
+const storage = typeof window !== 'undefined' ? sessionStorage : null;
+
 // Hook to persist state in session storage
 export default function usePersistState<T>(id: string, initialValue: T): [T, (newState: T) => void] {
 
   const value = useMemo(() => {
-    const sessionStorageValue = sessionStorage.getItem('state:' + id);
+    const sessionStorageValue = storage?.getItem('state:' + id);
 
     if (sessionStorageValue) {
       return JSON.parse(sessionStorageValue) as T;
@@ -18,7 +21,7 @@ export default function usePersistState<T>(id: string, initialValue: T): [T, (ne
 
   useEffect(() => {
     const stateStr = JSON.stringify(state);
-    sessionStorage.setItem('state:' + id, stateStr);
+    storage?.setItem('state:' + id, stateStr);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state]);