`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	Type	Description
`isSignedIn`	`boolean`	A boolean that returns `true` if the user is signed in.
`isLoaded`	`boolean`	A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`.
`user`	`User`	The `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

useUser() returns

How to use the useUser() hook

Retrieve the current user data with the useUser() hook

Update the current user data with the useUser() hook

Reload user data with the useUser() hook

`useUser()` returns

How to use the `useUser()` hook

Retrieve the current user data with the `useUser()` hook

Update the current user data with the `useUser()` hook

Reload user data with the `useUser()` hook