Render current-user data
A profile or account page needs to show the current user's name, ID, or other User fields.
Clerk · Hook
useUser
useUser() provides access to the current user's data in a React application. It also exposes loading and signed-in state so components can safely decide when to read or update the User object.
How it works
Call useUser() inside a React component to obtain Clerk's loading state, signed-in state, and current User object. Render only after isLoaded is true, then use isSignedIn to distinguish authenticated and signed-out states before reading user data or invoking User methods such as update().
Syntax
const { isLoaded, isSignedIn, user } = useUser();Returns
An object containing isLoaded, isSignedIn, and user. isLoaded indicates whether Clerk has loaded authentication state; isSignedIn indicates authentication status; user is the current User object.
Key points
- Use the hook to obtain the User instance associated with the current application user.
- isSignedIn lets UI logic distinguish authenticated users from signed-out visitors.
- isLoaded represents readiness of Clerk's authentication state, not whether the user is authenticated.
- The user result contains the current user's data and account-management methods.
- After authentication is established, User.update() can modify the current user's information.
- User.reload() can refresh the object when newer user data is needed.
Common mistakes
- Do not treat isLoaded as permanently true; authentication state updates can temporarily set it back to false.
- Only access user properties after checking the loading and signed-in states.
Example: Read the current user
import { useUser } from '@clerk/react';
export function Profile() {
const { isLoaded, isSignedIn, user } = useUser();
if (!isLoaded) return <p>Loading…</p>;
if (!isSignedIn) return <p>Please sign in.</p>;
return <p>Signed in as {user.firstName ?? user.id}</p>;
}This component waits for Clerk to initialize, handles signed-out users, and then displays data from the current User object.
When to use it
Manage account details
A settings form needs to change account information through the User object.
Gate user-dependent UI
A component must show loading, signed-out, and authenticated states distinctly.
Refresh user information
A screen needs to reflect changes made to user data elsewhere.
Interview questions
QWhat does useUser() return?
useUser() exposes the current User object together with isLoaded and isSignedIn. isLoaded indicates whether Clerk has initialized its authentication state, while isSignedIn indicates whether a user is authenticated.
Follow-up: What should a component do while isLoaded is false? It should render a loading or otherwise neutral state and defer user-dependent work until initialization completes.
QWhen would you use useUser() instead of only checking authentication?
The hook is useful when a component needs current-user data or account-management methods. After the hook reports a loaded, signed-in state, the component can read the User object and call methods such as update().
Follow-up: How can the component obtain fresh data after an external change? Use the User object's reload() method, which the documentation provides for retrieving the latest user information.
QHow should a component safely render user information?
A component should first handle the loading state, then branch on isSignedIn before reading user. This prevents rendering logic from assuming that user data is available during initialization or for signed-out visitors.
Follow-up: Why can a component need to handle loading more than once? Clerk can return isLoaded to false while authentication state is being updated, such as during an organization switch.
Related
UserisLoadedisSignedInuser.update()user.reload()