When working with Clerk in your React application, you often need to access information about the current user's session and profile. Clerk provides specialized hooks for this purpose: useUser and useSession. These hooks allow you to retrieve data about the authenticated user and their active session directly inside your React components.

The useUser hook is designed to give you easy access to the user's profile information. This includes data such as the user's name, email address, and any custom attributes you may have configured. By using this hook, you can personalize your application's interface and display relevant details about the signed-in user.

On the other hand, the useSession hook focuses on the user's current session. A session represents the active login state of a user on a device or browser. This hook provides details like session IDs, expiration information, and can help you manage session-specific logic, such as sign-out or session renewal.

To see how you can use the useUser hook to display user profile data, consider the following example. Imagine you want to show the user's name and email address in your app's header after they sign in. You can use the useUser hook to fetch and render this information.

import React from "react";
import { useUser } from "@clerk/clerk-react";

function UserProfile() {
  const { user, isLoaded } = useUser();

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <div>No user signed in.</div>;
  }

  return (
    <div>
      <h2>Welcome, {user.firstName}!</h2>
      <p>Email: {user.emailAddresses[0].emailAddress}</p>
    </div>
  );
}

In this example, you import the useUser hook and call it inside your UserProfile component. The hook returns a user object and an isLoaded flag. You should check that the data is loaded before trying to access user properties. Once loaded, you can display the user's first name and primary email address.