fix: hydration error in UserAvatarGroup
#23425
Conversation
Walkthrough
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
hbjORbj
changed the title
UserAvatarGroup
| type UserAvatarProps = Omit<React.ComponentProps<typeof AvatarGroup>, "items"> & { | ||
| users: (Pick<User, "name" | "username" | "avatarUrl"> & { | ||
| profile: Omit<UserProfile, "upId">; | ||
| hideTruncatedAvatarsCount?: boolean; |
There was a problem hiding this comment.
Wrong. Items of users do not have hideTruncatedAvatarsCount prop. This prop rather exists in React.ComponentProps<typeof AvatarGroup>
| /> | ||
| const [items, setItems] = useState<AvatarItem[]>( | ||
| users.map((user) => ({ | ||
| href: null, |
There was a problem hiding this comment.
set the initial value to null to avoid the hydration error
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
packages/ui/components/avatar/UserAvatarGroup.tsx (1)
26-33: DRY: extract a small builder to remove duplicate mapping logic.Same mapping appears in state init and effect. Centralize it to reduce maintenance.
const toItem = (user: UserAvatarProps["users"][number], href?: string): AvatarItem => ({ href, alt: user.name ?? user.username ?? "", title: user.name ?? user.username ?? "", image: getUserAvatarUrl(user), }); // init const [items, setItems] = useState<AvatarItem[]>(users.map((u) => toItem(u))); // in effect setItems(users.map((u) => toItem(u, `${getBookerBaseUrlSync(u.profile?.organization?.slug ?? null)}/${encodeURIComponent(u.username ?? u.profile?.username ?? "")}?redirect=false`)));Also applies to: 35-48
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/ui/components/avatar/UserAvatarGroup.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/ui/components/avatar/UserAvatarGroup.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/ui/components/avatar/UserAvatarGroup.tsx
**/*.{ts,tsx,js,jsx}
⚙️ CodeRabbit configuration file
Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.
Files:
packages/ui/components/avatar/UserAvatarGroup.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: anglerfishlyy
PR: calcom/cal.com#0
File: :0-0
Timestamp: 2025-08-27T16:39:38.156Z
Learning: anglerfishlyy encountered and systematically resolved multiple technical challenges during PR #23312 development: merge conflicts requiring manual resolution, TypeScript errors due to type definition mismatches (avatar: string vs avatar?: string in CheckedSelectOption), CI failures vs local test passing (environmental differences), syntax errors in ooo.ts file from incomplete merge conflict resolution, and pre-commit hook failures requiring --no-verify bypass. All issues were methodically debugged and fixed.
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Install dependencies / Yarn install & cache
🔇 Additional comments (2)
packages/ui/components/avatar/UserAvatarGroup.tsx (2)
50-50: ConfirmAvatarGroupacceptshrefbeing absent and won’t render a broken link.If
AvatarGrouprequires a non-null string, this will typecheck but may still render anchors with"undefined"or crash.
26-33: LGTM: state-first approach avoids hydration mismatch from client-only URL building.Initializing without
hrefand populating it after mount is a sound fix for hydration issues.
E2E results are ready! |
eunjae-lee
left a comment
eunjae-lee
left a comment
There was a problem hiding this comment.
Seems good and working well, but naively asking: can we also provide href on the server side? It seems possible to get some variables on the server side (which are used to compute the href) Correct me if I'm wrong.
Yes we can definitely do this, and this was my first thought too. But I am still not really sure if this hydration warning is worth all that |
What does this PR do?
href: null. The client’s first render during hydration uses that same initial state, so the HTML matches exactly what the server output (no mismatch).Before
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
http://localhost:3000/team/acme19123