useUser()
The useUser() hook is a convenient way to access the current User data where you need it. This hook provides the user data and helper methods to manage the current active session.
useUser() returns
- Name
isSignedIn- Type
boolean- Description
A boolean that returns
trueif the user is signed in.
- Name
isLoaded- Type
boolean- Description
A boolean that until Clerk loads and initializes, will be set to
false. Once Clerk loads,isLoadedwill be set totrue.
- Name
user- Type
User- Description
The
Userobject for the currently active user. If the user is not signed in,userwill benull.
How to use the useUser() hook
Retrieve the current user data with the useUser() hook
The following example demonstrates how to use the useUser() hook to access the user object, which includes the current user's data, like the user's full name. The isLoaded and isSignedIn properties are used to handle the loading state and to check if the user is signed in, respectively.
For more information on the User object, see the reference.
import { useUser } from "@clerk/clerk-react";
export default function Home() {
const { isSignedIn, user, isLoaded } = useUser();
if (!isLoaded) {
// Handle loading state however you like
return null;
}
if (isSignedIn) {
return <div>Hello {user.fullName}!</div>;
}
return <div>Not signed in</div>;
}Update the current user data with the useUser() hook
The following example demonstrates how to use the useUser() hook to access the user object, which includes the update method for updating the user's data.
For more information on the update() method, see the User reference.
import { useUser } from "@clerk/clerk-react";
export default function Home() {
const { isLoaded, user } = useUser();
if (!isLoaded) {
// Handle loading state however you like
return null;
}
if (!user) return null;
const updateUser = async () => {
await user.update({
firstName: "John",
lastName: "Doe",
});
};
return (
<>
<button onClick={updateUser}>Click me to update your name</button>
<p>user.firstName: {user?.firstName}</p>
<p>user.lastName: {user?.lastName}</p>
</>
);
}Reload user data with the useUser() hook
To retrieve the latest user data after updating the user elsewhere, use the user.reload() method.
For more information on the reload() method, see the User reference.
import { useUser } from "@clerk/clerk-react";
export default function Home() {
const { isLoaded, user } = useUser();
if (!isLoaded) {
// Handle loading state however you like
return null;
}
if (!user) return null;
const updateUser = async () => {
// Update data via an API endpoint
const updateMetadata = await fetch("/api/updateMetadata");
// Check if the update was successful
if (!updateMetadata.message === "success") {
throw new Error("Error updating");
}
// If the update was successful, reload the user data
await user.reload();
};
return (
<>
<button onClick={updateUser}>Click me to update your metadata</button>
<p>user role: {user?.publicMetadata.role}</p>
</>
);
}