fix: fixed major performance issue caused by react's strict-mode

gleamy-js · Sep 24, 2023 · c1faa05 · c1faa05
1 parent a7cff69
commit c1faa05
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 37 deletions.
diff --git a/dev-environment/package.json b/dev-environment/package.json
@@ -14,7 +14,7 @@
     "@types/react-dom": "18.2.7",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
-    "gleamy": "1.1.4",
+    "gleamy": "1.1.5",
     "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/gleamy/package.json b/packages/gleamy/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gleamy",
   "description": "Create a reactive shiny element in different materials",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "license": "MIT",
   "private": false,
   "sideEffects": false,

diff --git a/packages/gleamy/src/lib/components/base-materials/GradientMaterial.tsx b/packages/gleamy/src/lib/components/base-materials/GradientMaterial.tsx
@@ -2,7 +2,6 @@ import { type FC, useEffect, useCallback, useRef, useContext } from 'react';
 import { setDPI } from '../../utils/setDPI';
 import { type TStaticGradient, type TDynamicGradient } from '../../../types';
 import { GleamyContext } from '../../provider';
-import { drawMaterial } from '../../utils/drawMaterial';
 
 export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
   animator,
@@ -237,11 +236,31 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
   ]);
 
   useEffect(() => {
-    if (rendering) {
-      const fps = gleamyProvider?.fps || 60;
-      drawMaterial({ drawFunction: render, fps });
+    const fps = gleamyProvider?.fps || 60;
+
+    let animationFrameId = 0;
+    const interval = 1000 / fps;
+    let now;
+    let then = Date.now();
+    let delta;
+
+    function draw() {
+      now = Date.now();
+      delta = now - then;
+
+      if (delta > interval) {
+        then = now - (delta % interval);
+        rendering && render();
+      }
+      animationFrameId = window.requestAnimationFrame(draw);
     }
-  }, [gleamyProvider, render, rendering]);
+
+    draw();
+
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [props]);
 
   return (
     <canvas

diff --git a/packages/gleamy/src/lib/components/base-materials/ParticleMaterial.tsx b/packages/gleamy/src/lib/components/base-materials/ParticleMaterial.tsx
@@ -2,7 +2,6 @@ import { type FC, useEffect, useCallback, useContext, useRef } from 'react';
 import { setDPI } from '../../utils/setDPI';
 import { type TParticle } from '../../../types';
 import { GleamyContext } from '../../provider';
-import { drawMaterial } from '../../utils/drawMaterial';
 
 interface CreateParticles {
   depth: number;
@@ -251,11 +250,31 @@ export const ParticleMaterial: FC<TParticle> = ({
   ]);
 
   useEffect(() => {
-    if (rendering) {
-      const fps = gleamyProvider?.fps || 60;
-      drawMaterial({ drawFunction: render, fps });
+    const fps = gleamyProvider?.fps || 60;
+
+    let animationFrameId = 0;
+    const interval = 1000 / fps;
+    let now;
+    let then = Date.now();
+    let delta;
+
+    function draw() {
+      now = Date.now();
+      delta = now - then;
+
+      if (delta > interval) {
+        then = now - (delta % interval);
+        rendering && render();
+      }
+      animationFrameId = window.requestAnimationFrame(draw);
     }
-  }, [gleamyProvider, render, rendering]);
+
+    draw();
+
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [props]);
 
   return (
     <canvas

diff --git a/packages/gleamy/src/lib/utils/drawMaterial.ts b/packages/gleamy/src/lib/utils/drawMaterial.ts