fix: deps issue and useMemo for expensive object

longtv2222 · Jan 14, 2024 · 489d54d · 489d54d
1 parent a33de97
commit 489d54d
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/prototype/src/App.tsx b/prototype/src/App.tsx
@@ -4,7 +4,7 @@ import Lamborghini from "./components/Models/Lamborghini Aventador J"
 import Scene from "./components/Models/Autobianchi Stellina"
 import Maserati from "./components/Models/Maserati MC20"
 import { Leva, levaStore, useControls, button } from 'leva'
-import { Suspense, useEffect, useRef, useState } from 'react'
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
 import { Model, ModelProps, models } from './components/Models/model'
 
 interface Cars {
@@ -14,7 +14,7 @@ interface Cars {
 }
 
 export default function App() {
-  const cars: Record<Model, Cars> = {
+  const cars: Record<Model, Cars> = useMemo(() => ({
     "Lamborghini Aventador J": {
       Model: Lamborghini,
       interior: "#000000",
@@ -30,7 +30,7 @@ export default function App() {
       interior: "#000000",
       exterior: "#963f3f"
     },
-  };
+  }), []);
 
   const [carsState, setCarsState] = useState(() => cars);
   const carsStateRef = useRef(carsState);

diff --git a/prototype/src/components/Models/Autobianchi Stellina.tsx b/prototype/src/components/Models/Autobianchi Stellina.tsx
@@ -187,7 +187,7 @@ type GLTFResult = GLTF & {
 }
 
 export default function Car(props: ModelProps) {
-  const { nodes, materials } = useGLTF('/scene.gltf') as GLTFResult
+  const { nodes, materials } = useGLTF('/scene.gltf') as unknown as  GLTFResult
 
   return (
     <group name="Scene" rotation={[0, 3.14, 0]} {...props} dispose={null} >

diff --git a/prototype/src/components/Models/Lamborghini Aventador J.tsx b/prototype/src/components/Models/Lamborghini Aventador J.tsx
@@ -73,7 +73,7 @@ type GLTFResult = GLTF & {
 }
 
 export default function Lamborghini(props: ModelProps) {
-  const { nodes } = useGLTF('/lamborghini.glb') as GLTFResult;
+  const { nodes } = useGLTF('/lamborghini.glb') as unknown as GLTFResult;
 
   return (
     <group name={'Lamborghini'} scale={[0.010, 0.010, 0.010]} position={[0, 0.95, 0]} dispose={null} {...props}>

diff --git a/prototype/src/components/Models/Maserati MC20.tsx b/prototype/src/components/Models/Maserati MC20.tsx
@@ -562,7 +562,7 @@ type GLTFResult = GLTF & {
 }
 
 export default function Car(props: ModelProps) {
-  const { nodes, materials } = useGLTF('/maserati_mc20.glb') as GLTFResult
+  const { nodes, materials } = useGLTF('/maserati_mc20.glb') as unknown as GLTFResult
   return (
     <group {...props} dispose={null} position={[-2.2, -1, 4]} scale={[2, 2, 2]}>
       <group scale={0.01}>