fix: Next.js hydration mismatches, focus ref logic & performance

[kamilguszpit]

Summary

This PR addresses three critical issues identified during integration with Next.js (App Router):

1. Hydration Mismatches (SSR): Fixed window and document usage during initial render in useIsDocumentHidden and actualTheme. This eliminates console errors like Text content does not match server-rendered HTML in Next.js applications.
2. Focus Management (A11y): Fixed a logic error where listRef was being overwritten in the render loop. Converted it to listRefs (array) to correctly handle multiple toaster positions. Now, the hotkey correctly focuses the first available list instead of only the last one.
3. Performance: Optimized the Toaster subscription effect by removing [toasts] from the dependency array, preventing unnecessary re-subscriptions on every state update.

Changes

• src/hooks.tsx: Initialized state with false instead of document.hidden.
• src/index.tsx:
  • Deterministic theme initialization for SSR safety.
  • Implemented listRefs array pattern.
  • Fixed handleKeyDown to find and focus the first valid list (.find(el => el)).
  • Cleaned up useEffect dependencies.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
sonner	Ready	Preview, Comment	Jan 4, 2026 10:09pm

[Copilot]

Pull request overview

This PR fixes three critical issues for Next.js (App Router) compatibility: SSR hydration mismatches, focus management logic errors, and performance optimization. The changes ensure server-side rendering works correctly by avoiding window and document access during initial render, fix a focus ref bug by converting from a single ref to an array of refs for multiple toast positions, and optimize performance by removing unnecessary effect re-subscriptions.

• Fixed SSR hydration issues by initializing state with safe defaults before accessing browser APIs
• Converted single listRef to listRefs array to properly handle multiple toast positions
• Optimized subscription effect by removing unnecessary dependency

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/hooks.tsx	Initializes useIsDocumentHidden state with false instead of document.hidden to prevent SSR hydration mismatch
src/index.tsx	Simplifies actualTheme initialization for SSR, converts listRef to listRefs array, updates focus/escape key handlers, and removes toasts dependency from subscription effect

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.