Improve performance of confetti component (#24)

* Update src/Experience.jsx

* Update src/Components/Confetti.jsx

* Update src/Components/Confetti.jsx

* Update src/Experience.jsx

* Update src/Experience.jsx

* Update src/Experience.jsx

---------

Co-authored-by: sweep-ai[bot] <128439645+sweep-ai[bot]@users.noreply.github.com>

src/Components/Confetti.jsx

@@ -94,40 +94,40 @@ export default function ExplosionConfetti(
 
   useFrame(() => {
     if (isExploding && Math.random() < rate) explode()
-
+  
     let particleAmount = 0
-
+  
     for (let i = 0; i < booms.length; i++) {
       const boom = booms[i]
-
+  
       for (let k = 0; k < boom.children.length; k++) {
         let particle = boom.children[k]
-
+  
         particle.destination.y -= THREE.MathUtils.randFloat(0.1, 0.3)
         particle.life -= THREE.MathUtils.randFloat(0.005, 0.01)
-
+  
         const speedX = (particle.destination.x - particle.position.x) / 200
         const speedY = (particle.destination.y - particle.position.y) / 200
         const speedZ = (particle.destination.z - particle.position.z) / 200
-
+  
         particle.position.x += speedX
         particle.position.y += speedY
         particle.position.z += speedZ
-
+  
         particle.rotation.y += particle.rotateSpeedY
         particle.rotation.x += particle.rotateSpeedX
         particle.rotation.z += particle.rotateSpeedZ
-
+  
         particle.material.opacity -= THREE.MathUtils.randFloat(0.005, 0.01)
-
+  
         if (particle.position.y < -fallingHeight) {
           particle.material.dispose()
           particle.geometry.dispose()
           boom.remove(particle)
           particle = null
         }
       }
-
+  
       if (boom.children.length <= 0) {
         boom.dispose()
         setBooms(booms.filter((b) => b !== boom))
@@ -137,4 +137,4 @@ export default function ExplosionConfetti(
   })
 
   return <mesh ref={groupRef} position={[0, 2, -8]} />
-}
+}

src/Experience.jsx

@@ -17,23 +17,26 @@ const Experience = () => {
     })
     const [isExploding, setIsExploding] = useState()
 
+    const [prevScore, setPrevScore] = useState(0);
+
     useEffect(() => {
         const unsuscribeIsScored = useGame.subscribe(
             (state) => state.score,
             (score) => {
-                if(score) {
+                if(score != prevScore) {
                     setIsExploding(true)
                     setTimeout(() => {
                         setIsExploding(false)
                     }, 2000)
+                    setPrevScore(score);
                 }
             }
         )
-
+    
         return () => {
             unsuscribeIsScored()
         }
-    }, [])
+    }, [prevScore])
 
     return <>
         <color attach="background" args={["#ddc28d"]} />
@@ -85,4 +88,4 @@ const Zoom = () => {
     return <></>
 }
 
-export default Experience
+export default Experience