Infinite loop of component with use client
Unanswered
Bartholomeas posted this in #help-forum
![Avatar](https://cdn.discordapp.com/avatars/202136460818776064/63891f288369c1cac97ab603f103d359.webp?size=256)
BartholomeasOP
Hi, i have async page, looks like this:
And thats my BlogPostComments with use client directive:
Unfortunately its somehow looping to infinite... Any ideas? :/
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](https://cdn.discordapp.com/embed/avatars/4.png)
Rex
Does commenting out the
(trynna figure out issue originating from which component)
BlogPostComment
component solves the issue(trynna figure out issue originating from which component)
![Avatar](https://cdn.discordapp.com/avatars/202136460818776064/63891f288369c1cac97ab603f103d359.webp?size=256)
BartholomeasOP
Yeah, when i comment BlogPostComments everything is ok
But when i pass something to BlogPostCommenst from its page parent infinite loop occurs
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Rex
const [, setModalOpened] = useState(false)
why is modalOpened
missing here? is that intentional?![Avatar](https://cdn.discordapp.com/avatars/202136460818776064/63891f288369c1cac97ab603f103d359.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/4.png)
Rex
I am also relatively new so together maybe we can fix this
![Avatar](https://cdn.discordapp.com/avatars/202136460818776064/63891f288369c1cac97ab603f103d359.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/4.png)
Rex
Great
You can mark this question as solved