Next.js Discord

Discord Forum

Infinite loop of component with use client

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
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

Rex
Does commenting out the BlogPostComment component solves the issue
(trynna figure out issue originating from which component)
But when i pass something to BlogPostCommenst from its page parent infinite loop occurs
Rex
const [, setModalOpened] = useState(false) why is modalOpened missing here? is that intentional?
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)
Rex
I am also relatively new so together maybe we can fix this
@Rex I am also relatively new so together maybe we can fix this
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
Rex
Great
You can mark this question as solved