fix: memoize HMR, strict check constructors (#2757)

* fix: memoprop and hmr

* refactor(RTTR): get memoized props from instance fiber

* refactor(RTTR): exclude instance props from snapshot

* fix(RTTR): prefer live props

* refactor: remove memoizedProps changes

To be picked into another PR

---------

Co-authored-by: Cody Bennett <23324155+CodyJasonBennett@users.noreply.github.com>

example/package.json

@@ -7,26 +7,27 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@react-spring/core": "^9.4.4",
-    "@react-spring/three": "^9.4.4",
-    "@react-three/drei": "^9.1.2",
+    "@react-spring/core": "^9.6.1",
+    "@react-spring/three": "^9.6.1",
+    "@react-three/drei": "^9.56.24",
     "@use-gesture/react": "latest",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-merge-refs": "^1.1.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-merge-refs": "^2.0.1",
     "react-use-refs": "^1.0.1",
-    "styled-components": "^5.3.5",
-    "three": "^0.139.2",
-    "three-stdlib": "^2.9.1",
+    "styled-components": "^5.3.6",
+    "three": "^0.149.0",
+    "three-stdlib": "^2.21.8",
     "use-error-boundary": "^2.0.6",
-    "wouter": "^2.8.0-alpha.2",
-    "zustand": "^3.7.1"
+    "wouter": "^2.10.0",
+    "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.43",
-    "@types/styled-components": "^5.1.24",
+    "@types/react": "^18.0.28",
+    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.1"
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1"
   }
 }

example/src/demos/ContextMenuOverride.tsx

@@ -12,7 +12,8 @@ export default function App() {
       <ambientLight />
       <pointLight position={[10, 10, 10]} />
       <mesh
-        position={[0, 0, 0]}
+        scale={[2, 2, 2]}
+        position={[1, 0, 0]}
         onContextMenu={(ev) => {
           ev.nativeEvent.preventDefault()
           set((value) => !value)

example/vite.config.ts

@@ -1,9 +1,9 @@
 import { defineConfig } from 'vite'
-import reactRefresh from '@vitejs/plugin-react-refresh'
+import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   optimizeDeps: {
     exclude: ['@react-three/fiber'],
   },
-  plugins: [reactRefresh()],
+  plugins: [react()],
 })

packages/fiber/src/core/utils.ts

@@ -56,6 +56,7 @@ export class ErrorBoundary extends React.Component<
 }
 
 export const DEFAULT = '__default'
+export const DEFAULTS = new Map()
 
 export type DiffSet = {
   memoized: { [key: string]: any }
@@ -284,11 +285,13 @@ export function applyProps(instance: Instance, data: InstanceProps | DiffSet) {
     if (value === DEFAULT + 'remove') {
       if (currentInstance.constructor) {
         // create a blank slate of the instance and copy the particular parameter.
-        // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...(currentInstance.__r3f.memoizedProps.args ?? []))
-        value = defaultClassCall[key]
-        // destroy the instance
-        if (defaultClassCall.dispose) defaultClassCall.dispose()
+        let ctor = DEFAULTS.get(currentInstance.constructor)
+        if (!ctor) {
+          // @ts-ignore
+          ctor = new currentInstance.constructor()
+          DEFAULTS.set(currentInstance.constructor, ctor)
+        }
+        value = ctor[key]
       } else {
         // instance does not have constructor, just set it to 0
         value = 0
@@ -313,7 +316,7 @@ export function applyProps(instance: Instance, data: InstanceProps | DiffSet) {
         targetProp.copy &&
         value &&
         (value as ClassConstructor).constructor &&
-        targetProp.constructor.name === (value as ClassConstructor).constructor.name
+        targetProp.constructor === (value as ClassConstructor).constructor
       ) {
         targetProp.copy(value)
       }