From d6963ca301587b87cb79beabd4e57380408f91fa Mon Sep 17 00:00:00 2001
From: Cody Bennett <hi@codyb.co>
Date: Tue, 11 Oct 2022 04:53:12 -0500
Subject: [PATCH] fix: invalidate pierced props (#2563)

---
 packages/fiber/src/core/utils.ts   |  5 +++++
 packages/fiber/tests/utils.test.ts | 12 ++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/fiber/src/core/utils.ts b/packages/fiber/src/core/utils.ts
index 71d8e38b71..efa7caefd2 100644
--- a/packages/fiber/src/core/utils.ts
+++ b/packages/fiber/src/core/utils.ts
@@ -260,6 +260,11 @@ export function diffProps<T = any>(
 
     // Props changed, add them
     changedProps[prop] = newProps[prop]
+
+    // Reset pierced props
+    for (const other in newProps) {
+      if (other.startsWith(`${prop}-`)) changedProps[other] = newProps[other]
+    }
   }
 
   // Reset removed props for HMR
diff --git a/packages/fiber/tests/utils.test.ts b/packages/fiber/tests/utils.test.ts
index 1fa17e8574..442b12fda9 100644
--- a/packages/fiber/tests/utils.test.ts
+++ b/packages/fiber/tests/utils.test.ts
@@ -262,6 +262,18 @@ describe('diffProps', () => {
     expect(filtered).toStrictEqual({ bar: false })
   })
 
+  it('invalidates pierced props when root is changed', async () => {
+    const texture1 = { needsUpdate: false, name: '' } as THREE.Texture
+    const texture2 = { needsUpdate: false, name: '' } as THREE.Texture
+
+    const oldProps = { map: texture1, 'map-needsUpdate': true, 'map-name': 'test' }
+    const newProps = { map: texture2, 'map-needsUpdate': true, 'map-name': 'test' }
+
+    const instance = prepare({}, storeMock, '', oldProps)
+    const filtered = diffProps(instance, newProps)
+    expect(filtered).toStrictEqual(newProps)
+  })
+
   it('should pick removed props for HMR', () => {
     const instance = prepare(new THREE.Object3D(), storeMock, '', { position: [0, 0, 1] })
     const newProps = {}