From 4d9b2cad09a09dab515e739b36d7a518f734f34c Mon Sep 17 00:00:00 2001
From: mudassir-jmi <mudassirakhter420@gmail.com>
Date: Tue, 8 Oct 2024 10:57:52 +0530
Subject: [PATCH] Clarified 'one level deep' in hydration mismatch error
 documentation

---
 src/content/reference/react-dom/hydrate.md | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
index a005abf1444..a2c0d990ae6 100644
--- a/src/content/reference/react-dom/hydrate.md
+++ b/src/content/reference/react-dom/hydrate.md
@@ -146,7 +146,25 @@ export default function App() {
 
 </Sandpack>
 
-This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
+/*This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. */
+
+This suppression only works for the immediate children of the element with suppressHydrationWarning={true}, and is intended to be an escape hatch for specific scenarios where hydration mismatches are unavoidable. React won’t suppress mismatches in deeper nested elements. For example, if you apply suppressHydrationWarning to a parent element, the suppression only applies to its direct children, not to the grandchildren or deeper levels in the component tree.
+
+Example:
+
+If you have a component like this:
+
+```function ParentComponent() {
+  return (
+    <div suppressHydrationWarning={true}>
+      <ChildComponent />
+      <OtherChildComponent />
+    </div>
+  );
+}
+```
+
+React will suppress hydration mismatch warnings for ChildComponent and OtherChildComponent (the immediate children of the parent div), but not for any children within ChildComponent or OtherChildComponent.
 
 ---