Next.js Discord

Discord Forum

Infinite loop of component with use client

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
Avatar
BartholomeasOP
Hi, i have async page, looks like this:

type BlogPostProps = {
  params: { postId: string }
}

const BlogPostPage = async ({ params: { postId } }: BlogPostProps) => {
  const post = await fetchGetBlogPost(postId)
  const postPhoto = await fetchGetFile(post?.photoId)
  const { items: comments } = await fetchGetBlogPostComments(postId)

  const breadcrumbItems: TBreadcrumbItem[] = [
    { label: 'Blog', url: routes['public.blog'], icon: Book },
    { label: post?.title ?? '' },
  ]
.......

                <BlogPostComments comments={comments} />


And thats my BlogPostComments with use client directive:
type BlogPostCommentsProps = { comments: TBlogComment[] | undefined }

const SHOW_AMOUNT = 5

export const BlogPostComments = ({ comments }: BlogPostCommentsProps) => {
  console.log(comments)


  const [showMore] = useState(false)
  const [, setModalOpened] = useState(false)

  const { userId } = useAppSelector((state) => state.auth)

  const toggleModal = () => {
    setModalOpened((prevState) => !prevState)
  }
  // TODO: add infinite scroll for comments
  const visibleComments = useMemo(() => {
    return comments?.slice(0, SHOW_AMOUNT)
  }, [comments])

  const hiddenComments = useMemo(() => {
    if (comments?.length > SHOW_AMOUNT) return comments?.slice(SHOW_AMOUNT)
    return []
  }, [comments])


Unfortunately its somehow looping to infinite... Any ideas? :/

13 Replies

Avatar
Rex
Does commenting out the BlogPostComment component solves the issue
(trynna figure out issue originating from which component)
Avatar
BartholomeasOP
Yeah, when i comment BlogPostComments everything is ok
But when i pass something to BlogPostCommenst from its page parent infinite loop occurs
Avatar
Rex
const [, setModalOpened] = useState(false) why is modalOpened missing here? is that intentional?
Avatar
BartholomeasOP
Thats just for a while, because my eslint rules deletes not used properties
Everything is commented in this component, here is just fetch and these functions
Its ends up with infinite loop even if im fetching data directly here (with useQuery)...
// export const BlogPostComments = ({ postId }: BlogPostCommentsProps) => {
export const BlogPostComments = () => {
  const { postId } = useParams()
  const { data: comments } = useGetBlogPostComments(typeof postId === 'string' ? postId : undefined)
  console.log(comments)
Avatar
Rex
I am also relatively new so together maybe we can fix this
Avatar
BartholomeasOP
ok, i've fixed that 😄
forgot to put Suspense boundary to my client component

                <Suspense fallback={<AppLoader />}>
                  <BlogPostComments />
                </Suspense>
Now its ok, because just this is rerendering, rest of the content stays static
Avatar
Rex
Great
You can mark this question as solved