fix: invalidate pierced props (#2549)

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 }

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')
+  })
 })