From f86fe8c5bb1674a00f9b3d98ddb68f8cea320263 Mon Sep 17 00:00:00 2001
From: Alex Pacheco <54867692+vib3-ch3ck@users.noreply.github.com>
Date: Tue, 29 Apr 2025 09:50:08 -0400
Subject: [PATCH 1/3] Update keeping-components-pure.md

---
 src/content/learn/keeping-components-pure.md | 24 ++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 6d4f55763fa..5d6ab50f0b0 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -85,6 +85,30 @@ You could think of your components as recipes: if you follow them and don't intr
 
 <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
 
+### JSX Equality and Purity
+
+React considers two JSX values to be "equal" for purity purposes if:
+1. **Their types are identical** (e.g., both `<Child />`).
+2. **Their props are deeply equal**:
+   - Primitive props (`string`, `number`, `boolean`) must be `===` equal.
+   - Object/array props must be *structurally equivalent* (same keys/values, regardless of reference).
+3. **Their `key` and `ref` props (if any) are equal**.
+
+#### Example
+<Sandpack>
+
+```jsx
+// These are considered equal (same structure):
+<Child config={{ color: 'red' }} />
+<Child config={{ color: 'red' }} />
+
+// These are NOT equal (different structure):
+<Child config={{ color: 'red' }} />
+<Child config={{ color: 'blue' }} />
+```
+
+</Sandpack>
+
 ## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/}
 
 React's rendering process must always be pure. Components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure!

From 9c12c5a308ad15023fd7c8a8b0c5a5de2998a94d Mon Sep 17 00:00:00 2001
From: Alex Pacheco <54867692+vib3-ch3ck@users.noreply.github.com>
Date: Tue, 29 Apr 2025 09:52:17 -0400
Subject: [PATCH 2/3] Update keeping-components-pure.md

---
 src/content/learn/keeping-components-pure.md | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 5d6ab50f0b0..89d3706f98f 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -85,16 +85,16 @@ You could think of your components as recipes: if you follow them and don't intr
 
 <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
 
-### JSX Equality and Purity
+#### What does "same JSX" mean?  
 
-React considers two JSX values to be "equal" for purity purposes if:
-1. **Their types are identical** (e.g., both `<Child />`).
-2. **Their props are deeply equal**:
-   - Primitive props (`string`, `number`, `boolean`) must be `===` equal.
-   - Object/array props must be *structurally equivalent* (same keys/values, regardless of reference).
-3. **Their `key` and `ref` props (if any) are equal**.
+For two JSX values to be considered equal in React's purity model:  
+
+- **Type equality**: They must be the same component or HTML tag (e.g., `<Button />` vs `<div>`).  
+- **Prop equality**:  
+  - Primitive props (`string`, `number`, `boolean`) must be identical (`===`).  
+  - Object/array props must have *equivalent structure* (same keys/values, even if references differ).  
+- **Special props**: `key` and `ref` (if present) must be identical.  
 
-#### Example
 <Sandpack>
 
 ```jsx
@@ -102,11 +102,11 @@ React considers two JSX values to be "equal" for purity purposes if:
 <Child config={{ color: 'red' }} />
 <Child config={{ color: 'red' }} />
 
-// These are NOT equal (different structure):
-<Child config={{ color: 'red' }} />
+// These are NOT equal (different structure or type):
 <Child config={{ color: 'blue' }} />
+<Child />
+<DifferentComponent />
 ```
-
 </Sandpack>
 
 ## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/}

From 4d16426d2fa262812e13a9e7dd892c3bf61c8395 Mon Sep 17 00:00:00 2001
From: Alex Pacheco <54867692+vib3-ch3ck@users.noreply.github.com>
Date: Tue, 29 Apr 2025 09:55:00 -0400
Subject: [PATCH 3/3] Update keeping-components-pure.md

---
 src/content/learn/keeping-components-pure.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 89d3706f98f..5ff05af7537 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -85,7 +85,7 @@ You could think of your components as recipes: if you follow them and don't intr
 
 <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
 
-#### What does "same JSX" mean?  
+#### JSX Equality:  
 
 For two JSX values to be considered equal in React's purity model:  
 
@@ -102,10 +102,9 @@ For two JSX values to be considered equal in React's purity model:
 <Child config={{ color: 'red' }} />
 <Child config={{ color: 'red' }} />
 
-// These are NOT equal (different structure or type):
+// These are NOT equal (different structure):
+<Child config={{ color: 'red' }} />
 <Child config={{ color: 'blue' }} />
-<Child />
-<DifferentComponent />
 ```
 </Sandpack>