fix(web): MobileAppBanner hydration error fix suggestion #17671
Conversation
WalkthroughThe pull request modifies the Changes
Possibly related PRs
Suggested Labels
Suggested Reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/web/components/MobileAppBanner/MobileAppBanner.tsx (1)
Line range hint
34-45: Improve platform detection to prevent potential hydration issues.The
getMobilePlatformfunction directly accesses browser APIs which could cause issues during server-side rendering. While the function checks fortypeof navigator, it's better to encapsulate all browser-specific logic.Consider this improved implementation:
- const getMobilePlatform = (): string => { - if (typeof navigator === 'undefined') { - return '' - } - const userAgent = navigator.userAgent || navigator.vendor - return /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream - ? 'apple' - : 'android' - } + const getMobilePlatform = (): string => { + if (typeof window === 'undefined') { + return '' + } + try { + const userAgent = window.navigator.userAgent || window.navigator.vendor + return /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream + ? 'apple' + : 'android' + } catch { + return '' + } + }
🧹 Nitpick comments (3)
apps/web/components/MobileAppBanner/MobileAppBanner.tsx (3)
59-60: The hydration fix looks promising but could be further improved.The change to include
!isMountedin the Hidden component's screen prop helps prevent hydration mismatches by ensuring consistent server/client rendering. However, we could further optimize this to prevent any potential flash of content.Consider this alternative approach:
- return ( - <Hidden screen={hidden || !isMounted} print={true}> + return ( + <> + {/* Prevent hydration mismatch by deferring client-side rendering */} + {typeof window !== 'undefined' && ( + <Hidden screen={hidden} print={true}>This approach ensures the banner is only rendered client-side, completely eliminating the possibility of hydration mismatches.
Line range hint
15-19: Enhance type safety for browser APIs.The current type declarations could be more specific to prevent potential type-related issues.
Consider these type improvements:
declare global { interface Window { - MSStream: unknown + MSStream: boolean | undefined + navigator: Navigator & { + vendor: string + } } }
Line range hint
27-33: Optimize state management and initialization.The component uses multiple state variables that could be consolidated, and the initialization logic could be improved.
Consider these improvements:
- const [isMounted, setIsMounted] = useState(false) - const [hidden, setHidden] = useState<boolean>( - !!Cookies.get(COOKIE_NAME) || !appleLink || !androidLink, - ) - const [isApple, setIsApple] = useState<boolean>(false) + interface BannerState { + isMounted: boolean; + hidden: boolean; + platform: 'apple' | 'android' | ''; + } + + const [bannerState, setBannerState] = useState<BannerState>(() => ({ + isMounted: false, + hidden: !!Cookies.get(COOKIE_NAME) || !appleLink || !androidLink, + platform: '', + }));This approach:
- Consolidates related state
- Uses a single state update
- Makes the state structure more maintainable
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/components/MobileAppBanner/MobileAppBanner.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
apps/web/components/MobileAppBanner/MobileAppBanner.tsx (1)
Pattern apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
* fix: init * fix: more fix --------- Co-authored-by: Jón Levy <[email protected]>
What
local run on main branch
after pr changes
Still some issues but the hydration error is (mostly) gone
Checklist:
Summary by CodeRabbit