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

---
 packages/fiber/src/core/utils.ts            |  6 ++++++
 packages/fiber/tests/core/renderer.test.tsx | 22 +++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/fiber/src/core/utils.ts b/packages/fiber/src/core/utils.ts
index fd9606e0da..25d8eeb79c 100644
--- a/packages/fiber/src/core/utils.ts
+++ b/packages/fiber/src/core/utils.ts
@@ -233,6 +233,12 @@ export function diffProps(
     let entries: string[] = []
     if (key.includes('-')) entries = key.split('-')
     changes.push([key, value, false, entries])
+
+    // Reset pierced props
+    for (const prop in props) {
+      const value = props[prop]
+      if (prop.startsWith(`${key}-`)) changes.push([prop, value, false, prop.split('-')])
+    }
   })
 
   const memoized: { [key: string]: any } = { ...props }
diff --git a/packages/fiber/tests/core/renderer.test.tsx b/packages/fiber/tests/core/renderer.test.tsx
index e742c6d2c3..ac0e55eff0 100644
--- a/packages/fiber/tests/core/renderer.test.tsx
+++ b/packages/fiber/tests/core/renderer.test.tsx
@@ -762,4 +762,26 @@ describe('renderer', () => {
     expect(groupHandle).toBeDefined()
     expect(prevUUID).not.toBe(groupHandle!.uuid)
   })
+
+  it('invalidates pierced props when root is changed', async () => {
+    const material = React.createRef<THREE.MeshBasicMaterial>()
+    const texture1 = { needsUpdate: false, name: '' } as THREE.Texture
+    const texture2 = { needsUpdate: false, name: '' } as THREE.Texture
+
+    await act(async () =>
+      root.render(<meshBasicMaterial ref={material} map={texture1} map-needsUpdate={true} map-name="test" />),
+    )
+
+    expect(material.current!.map).toBe(texture1)
+    expect(texture1.needsUpdate).toBe(true)
+    expect(texture1.name).toBe('test')
+
+    await act(async () =>
+      root.render(<meshBasicMaterial ref={material} map={texture2} map-needsUpdate={true} map-name="test" />),
+    )
+
+    expect(material.current!.map).toBe(texture2)
+    expect(texture2.needsUpdate).toBe(true)
+    expect(texture2.name).toBe('test')
+  })
 })