docs(react-dom): add hydrateRoot hydration mismatch debugging guide

[yogayataverma]

Summary

This PR improves the hydrateRoot documentation by adding guidance for debugging hydration mismatches.

What changed

• Added a new troubleshooting section: Debugging hydration mismatches
• Added common causes, including:
  • Changing values during render (for example, Math.random() or Date.now())
  • Browser only logic in render (window, document, localStorage)
  • Server/client data differences on first render
  • Data timing inconsistencies
• Added a minimal mismatch example using Math.random()
• Added a step by step debugging checklist
• Added an Isolating the component workflow to help identify the root cause

Why made the section

Hydration mismatch errors are common in SSR apps and are often difficult to debug, especially for beginners and intermediate developers.
This update gives readers a clear process to identify and fix mismatches.

Validation

• Ran yarn lint-heading-ids successfully

Issue

Closes #36242

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[Copilot]

Pull request overview

Adds a new troubleshooting guide to the hydrateRoot reference to help readers debug SSR hydration mismatches, including common causes, a minimal repro, and a step-by-step isolation workflow.

Changes:

• Adds “Debugging hydration mismatches” section under Troubleshooting with common causes, an example, and a checklist.
• Expands the existing hydration error causes list to include non-deterministic render values (Date.now(), Math.random()).

---

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