Search code examples
reactjsnext.jsnext-authnext.js13

infinite re render when using useSession(next-auth) in a client side component in next 13

I'm using next-auth in my next 13 project. and want to use useSession hook to get session in client side, i use "use client" at the start but when i use useSession it re render the program infinitly and i have no idea!

it works in page.js fine but not in components

Solution

  • I had the same issue because I had an async React component.

    My initial component was similar to the following format.

    import { useSession } from 'next-auth/react'

export const Component = async () => {

  const { data, status } = useSession()

  console.log(data)

  return (
    <div>{data ? `Hi ${data?.user?.name}` : ''}</div>
  )
}

    Removing the async keyword solved my issue.

    import { useSession } from 'next-auth/react'

export const Component = () => {

  const { data, status } = useSession()

  console.log(data)

  return (
    <div>{data ? `Hi ${data?.user?.name}` : ''}</div>
  )
}