use-session-list.mdx

title	useSessionList()
description	Access and manage the current user's session list in your React application with Clerk's useSessionList() hook.
sdk	chrome-extension, expo, nextjs, react, react-router, tanstack-react-start

The useSessionList() hook returns an array of Session objects that have been registered on the client device.

Example

Get a list of sessions

The following example uses useSessionList() to get a list of sessions that have been registered on the client device. The sessions property is used to show the number of times the user has visited the page.

```tsx {{ filename: 'src/pages/Home.tsx' }} import { useSessionList } from '@clerk/react'

export default function Home() { const { isLoaded, sessions } = useSessionList()

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

return (
  <div>
    <p>Welcome back. You've been here {sessions.length} times before.</p>
  </div>
)

}

</If>

<If sdk="nextjs">
```tsx {{ filename: 'app/home/page.tsx' }}
'use client'

import { useSessionList } from '@clerk/nextjs'

export default function Page() {
  const { isLoaded, sessions } = useSessionList()

  // Handle loading state
  if (!isLoaded) return <div>Loading...</div>

  return (
    <div>
      <p>Welcome back. You've been here {sessions.length} times before.</p>
    </div>
  )
}

```tsx {{ filename: 'app/routes/home.tsx' }} import { useSessionList } from '@clerk/react-router'

export default function Home() { const { isLoaded, sessions } = useSessionList()

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

return (
  <div>
    <p>Welcome back. You've been here {sessions.length} times before.</p>
  </div>
)

}

</If>

<If sdk="chrome-extension">
```tsx {{ filename: 'src/routes/page.tsx' }}
import { useSessionList } from '@clerk/chrome-extension'

export default function Home() {
  const { isLoaded, sessions } = useSessionList()

  // Handle loading state
  if (!isLoaded) return <div>Loading...</div>

  return (
    <div>
      <p>Welcome back. You've been here {sessions.length} times before.</p>
    </div>
  )
}

```tsx {{ filename: 'app/routes/index.tsx' }} import { useSessionList } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({ component: Home, })

export default function Home() { const { isLoaded, sessions } = useSessionList()

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

return (
  <div>
    <p>Welcome back. You've been here {sessions.length} times before.</p>
  </div>
)

}

</If>

<If sdk="expo">
```tsx {{ filename: 'app/(session-list)/page.tsx' }}
import { useSessionList } from '@clerk/expo'
import { Text, View } from 'react-native'

export default function Home() {
  const { isLoaded, sessions } = useSessionList()

  // Handle loading state
  if (!isLoaded) return <View>Loading...</View>

  return (
    <View>
      <Text>Welcome back. You've been here {sessions.length} times before.</Text>
    </View>
  )
}