Display active organization information
Show an organization's name or other active-organization details in application UI.
Clerk · Hook
useOrganization
React's useOrganization() hook provides access to the currently active Clerk Organization and optionally fetches related collections. Collection data is not populated unless requested with true or configuration options.
How it works
Call the hook to access the currently active Organization and its related attributes. The organization object becomes available after loading; collection attributes such as memberships and domains require explicit expansion, optionally with pagination settings.
Syntax
const { isLoaded, organization } = useOrganization(options?)Parameters
| Name | Type | Description |
|---|---|---|
options | object | Optional configuration object. Collection properties such as memberships, invitations, membershipRequests, and domains accept true or an options object; options can include initialPage, pageSize, infinite, and keepPreviousData, with collection-specific filters. |
Returns
An object containing the active organization attributes and optional paginated collection resources, including loading state such as isLoaded.
Key points
- Use the hook to read data belonging to the active organization.
- Its argument is one object whose properties configure optional data retrieval.
- pageSize limits the number of results returned in each page.
- If pageSize is omitted, each page defaults to ten results.
- Set infinite to true when fetched pages should accumulate instead of replacing prior results.
- The infinite option supports interfaces that load more results as the user scrolls.
Common mistakes
- Do not expect memberships, invitations, membership requests, or domains to be present unless you explicitly request them.
- Pass true or a configuration object when you need a paginated organization collection.
Example: Read the active organization
import { useOrganization } from '@clerk/react'
export default function OrganizationName() {
const { isLoaded, organization } = useOrganization()
if (!isLoaded) return <div>Loading...</div>
return <h1>Welcome to {organization?.name}</h1>
}Reads the active organization after Clerk finishes loading it.
When to use it
Paginate memberships
Load organization memberships with page and size controls for member lists.
Append paginated results
Build progressive loading or infinite-scroll organization lists.
Interview questions
QWhat does useOrganization provide?
It exposes attributes of the currently active organization. Destructure the loading state and organization value, then avoid rendering organization-dependent UI until loading completes.
Follow-up: How would you load organization memberships? Pass the memberships option as true or provide its pagination configuration.
QHow are organization collections requested?
The hook accepts one object containing optional expansion settings. These settings control whether collections such as memberships, invitations, membership requests, and domains are fetched.
Follow-up: What happens if no options are provided? Those collection attributes remain unpopulated by default.
QHow does pagination work?
A collection can be requested with true or an options object. The object can specify pagination values such as initialPage and pageSize, while infinite controls whether newly fetched results append to the existing list.
Follow-up: What is the default page size? The documentation states that pageSize defaults to 10.
Related
OrganizationmembershipsinvitationsmembershipRequestsdomainsinitialPagepageSizeinfinite