diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx index d7b005f2c..b3c18ef7f 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx @@ -1,5 +1,5 @@ -import { GroupProps, useLoader } from '@react-three/fiber'; -import { useEffect, useRef, useState } from 'react'; +import { useLoader } from '@react-three/fiber'; +import { memo, useEffect, useRef, useState } from 'react'; import { Euler, Group, Mesh, Vector3 } from 'three'; import { GLTFLoader } from 'three-stdlib'; import { degToRad } from 'three/src/math/MathUtils'; @@ -19,9 +19,7 @@ import { nameToArmorId } from '../../../../../../../core/blitzkrieg/nameToArmorI import { resolveArmor } from '../../../../../../../core/blitzkrieg/resolveThickness'; import { useTankopedia } from '../../../../../../../stores/tankopedia'; -interface TankArmorProps extends GroupProps {} - -export function TankArmor({ ...props }: TankArmorProps) { +export const TankArmor = memo(() => { const wrapper = useRef(null); const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState< ModelDefinitions | undefined @@ -153,7 +151,6 @@ export function TankArmor({ ...props }: TankArmorProps) { return ( ); -} +}); diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx index 25920b008..2c45d6c79 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx @@ -1,5 +1,5 @@ import { ThreeEvent, useLoader, useThree } from '@react-three/fiber'; -import { useEffect, useRef, useState } from 'react'; +import { memo, useEffect, useRef, useState } from 'react'; import { Euler, Group, @@ -27,9 +27,7 @@ import mutateTankopedia, { useTankopedia, } from '../../../../../../../stores/tankopedia'; -export function TankModel() { - // "TypeError: dispatcher.use is not a function" - // const awaitedModelDefinitions = use(modelDefinitions); +export const TankModel = memo(() => { const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState< ModelDefinitions | undefined >(undefined); @@ -116,7 +114,7 @@ export function TankModel() { return () => { modelTransformEvent.off(handleModelTransform); }; - }, [awaitedModelDefinitions]); + }); if (!awaitedModelDefinitions) return; @@ -317,4 +315,4 @@ export function TankModel() { ); -} +});