Fix: Improve useIsMobile SSR and initial render consistency

[Stereco-btc]

Overview: This PR updates the useIsMobile hook to ensure consistent behavior during server-side rendering (SSR) and on initial client-side renders.

Changes

• Modified the useState initialization in src/hooks/use-mobile.ts to check for window availability. If window is undefined (SSR), it defaults to false. Otherwise, it directly calculates the initial isMobile state based on window.innerWidth.
• Removed the redundant checkIsMobile() call in the useEffect hook, as the initial state is now correctly set during useState initialization.

Summary by CodeRabbit

• Refactor
  • Optimized mobile detection initialization to improve server-side rendering support and enhance performance with streamlined resize event handling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The useIsMobile hook is refactored to use lazy state initialization for SSR-safety, returning false when window is undefined and checking window.innerWidth < MOBILE_BREAKPOINT on the client. The immediate checkIsMobile() call on mount is removed; ResizeObserver-based updates handle subsequent changes.

Changes

Cohort / File(s)	Summary
useIsMobile Hook Initialization src/hooks/use-mobile.ts	Replaces eager initial state with lazy initializer for SSR-safe initialization; removes immediate checkIsMobile() invocation on mount while preserving ResizeObserver-driven resize handling and SSR guard.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Single-file change with straightforward refactoring pattern
• Lazy initializer is a common SSR idiom; minimal logic density
• No new external dependencies or complex state logic introduced

Possibly related PRs

• Changes: Improve src/hooks/use-mobile.ts to be safe durin #94: Modifies the same hook (src/hooks/use-mobile.ts) with SSR window guards and ResizeObserver-based mobile detection logic.
• feat: Implement responsive design for mobile devices #42: Adds mobile-responsive features that depend on the useIsMobile hook and MOBILE_BREAKPOINT constant modified in this PR.
• feat: Add unit tests for useMobile hook #82: Adds unit tests that exercise the useIsMobile hook's initialization and resize-update behavior affected by these changes.

Suggested reviewers

• fehranbit

Poem

🐰 A lazy init, so sleek and clean,
No SSR tears have ever been seen!
The ResizeObserver hops with glee,
Mobile breakpoints checked with ease, you see!
Thump thump! Goes the optimization train. 🚂✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving SSR and initial render consistency in the useIsMobile hook, which aligns with the core modifications in the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/use-mobile-ssr-consistency

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 80ab967 and 7ea8cba.

📒 Files selected for processing (1)

• src/hooks/use-mobile.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/hooks/use-mobile.ts (1)

src/lib/responsive.ts (1)

• MOBILE_BREAKPOINT (1-1)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n src/hooks/use-mobile.ts

Repository: Authormaton/authormaton

Length of output: 1049

---

🏁 Script executed:

rg -n "useIsMobile" --type=ts --type=tsx -C3

Repository: Authormaton/authormaton

Length of output: 94

---

🏁 Script executed:

rg -n "useIsMobile" --type=ts -C3

Repository: Authormaton/authormaton

Length of output: 6544

---

🏁 Script executed:

rg -n "useIsMobile" -C3

Repository: Authormaton/authormaton

Length of output: 6544

---

🏁 Script executed:

sed -n '55,80p' src/components/ui/sidebar.tsx

Repository: Authormaton/authormaton

Length of output: 958

---

🏁 Script executed:

sed -n '14,40p' src/components/models/projects/ProjectsTable.tsx

Repository: Authormaton/authormaton

Length of output: 908

---

🏁 Script executed:

sed -n '8,30p' src/components/layouts/GeneralLayout.tsx

Repository: Authormaton/authormaton

Length of output: 913

---

🏁 Script executed:

sed -n '14,60p' src/components/models/projects/ProjectsTable.tsx

Repository: Authormaton/authormaton

Length of output: 1433

---

🏁 Script executed:

rg -n "suppressHydrationWarning" --type=ts

Repository: Authormaton/authormaton

Length of output: 143

---

🏁 Script executed:

rg -n "suppressHydrationWarning"

Repository: Authormaton/authormaton

Length of output: 143

---

Hydration mismatch from lazy useState initializer reading window

The lazy initializer with typeof window === 'undefined' is runtime-safe for SSR, but it causes server and initial client renders to diverge:

• On the server, isMobile is always false.
• On the client during hydration, the initializer may return true if innerWidth < 768.

This causes hydration mismatches in components that conditionally render based on isMobile:

• GeneralLayout.tsx renders <Sheet> on mobile but <div> on desktop based on this value
• ProjectsTable.tsx renders a grid on mobile but <BasicTable> on desktop based on this value

Both components will render different markup on the server versus the client, triggering hydration warnings and potential layout shifts after the effect updates.

Initialize to a constant value (e.g., useState(false)) and rely on the effect to update after mount, ensuring server and first hydration render are consistent. Alternatively, make these components client-only or add suppressHydrationWarning if the brief mismatch is acceptable.

🤖 Prompt for AI Agents

In src/hooks/use-mobile.ts around lines 6 to 11, the lazy useState initializer
reads window causing server vs initial client render divergence; change the
initial state to a constant (e.g., useState(false)) so SSR and first hydration
produce the same output, then in a useEffect run only on mount to read
window.innerWidth and setIsMobile accordingly, and also add a resize listener
inside that effect to update on viewport changes with proper cleanup on unmount.