useUserDialogListState seems to cause components to render twice on page load

[twilio-jyoung]

I'm using this hook in a next.js app.

Without the UserDialog component and useUserDialogListState hook on my page, the component loads once on page load. When I add these in, the component renders twice. Any idea why it's doing this?

<UserDialogContainer name={user.name} src={user.image}> <UserDialog aria-label="my_user_menu"> <UserDialogUserInfo> <UserDialogUserName>{user.name}</UserDialogUserName> <UserDialogUserEmail>{user.email}</UserDialogUserEmail> </UserDialogUserInfo> <UserDialogList {...userDialogList} aria-label="User menu actions"> <UserDialogListItem {...userDialogList} onSelect={() => signOut()}> Log Out </UserDialogListItem> </UserDialogList> </UserDialog> </UserDialogContainer>

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• UserDialog component bug within ShadowDOM (updated: 10/10/2023, similarity score: 85%)
• Opening modal changes my underlying page container width (updated: 10/25/2022, similarity score: 84%)
• Paste with react-hook-form (updated: 02/23/2023, similarity score: 83%)

[dosubot[bot]]

🤖

Hello @twilio-jyoung! 👋

I'm Dosu, a friendly bot here to help you with the Paste project while we wait for one of the human maintainers. I'm here to assist with bug resolution, answer any questions you might have, and even guide you in contributing to the project. Let's see if we can unravel this mystery together! 🕵️‍♂️

The behavior you're observing might be due to the way React handles state updates and re-renders. When you use the useUserDialogListState hook, it triggers a state update which in turn causes a re-render of the component.

In your UserDialogContainer component, if you're using a state hook inside the component function, every time the component function is called (which happens on every render), a new state is created. If the state prop is not provided, the state hook is called, which triggers a state update and hence a re-render.

To avoid this, you could move the state initialization outside of the component function, or use a useEffect hook to only update the state when certain props change. However, this would depend on the specifics of your application and how you're using the UserDialogContainer component.

The useUserDialogListState hook in the Paste codebase is a wrapper around the useListboxPrimitiveState hook from the @twilio-paste/listbox-primitive package. It is used to manage the state of a listbox component in the UserDialog component. The hook takes an optional props argument which is used to set the initial state of the listbox. The hook returns an object that contains the current state of the listbox and functions to manipulate that state. The hook sets the orientation property of the listbox to "vertical" by default.

I wasn't able to find a specific reason within the Paste repository why the useUserDialogListState hook might cause a component to render twice in a Next.js application. It might be helpful to check if there are any specific conditions in your Next.js application that might be causing the additional render. If you could provide more details about your implementation, it might help in identifying the cause of the issue.

For more information, you can refer to the UserDialogContainer and UserDialogList components in the Paste repository.

Let me know if you need further assistance. Dosu

Sources

• packages/paste-core/components/user-dialog/src/UserDialogContainer.tsx
• packages/paste-core/components/user-dialog/src/UserDialogList.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[nkrantz]

Hey @twilio-jyoung - can you please provide a codesandbox reproduction?

[serifluous]

Marking this discussion as answered due to inactivity. Let us know if you need help sending over a codesandbox repro! Happy to continue discussing.