Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

NameTypeDescription
isSignedInbooleanA boolean that returns true if the user is signed in.
isLoadedbooleanA boolean that until Clerk loads and initializes, will be set to false. Once Clerk loads, isLoaded will be set to true.
userUserThe User object for the currently active user. If the user is not signed in, user will be null.

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.

home.tsx
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.

home.tsx
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.

home.tsx
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> </> ); }

Last updated on March 22, 2024

What did you think of this content?

Clerk © 2024