fix: fixed component, it was refreshing infinite times for a bug. now it works perfectly

Author: matteobruni

apps/nextjs-beta/package.json

@@ -11,18 +11,18 @@
   },
   "dependencies": {
     "@next/font": "^14.0.3",
-    "@tsparticles/configs": "^3.0.0",
-    "@tsparticles/engine": "^3.0.0",
+    "@tsparticles/configs": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
     "@tsparticles/react": "workspace:^",
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "eslint": "^8.55.0",
     "eslint-config-next": "^14.0.3",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsparticles": "^3.0.0-beta.4",
-    "typescript": "^5.3.2"
+    "tsparticles": "^3.0.2",
+    "typescript": "^5.3.3"
   }
 }

apps/nextjs/package.json

@@ -10,13 +10,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0",
+    "@tsparticles/engine": "^3.0.2",
     "@tsparticles/react": "workspace:^",
     "@tsparticles/preset-big-circles": "^3.0.0",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "devDependencies": {
     "eslint": "^8.55.0",

apps/react/package.json

@@ -3,12 +3,12 @@
   "version": "3.0.0-beta.1",
   "private": true,
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0",
+    "@tsparticles/engine": "^3.0.2",
     "@tsparticles/react": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "tsparticles": "^3.0.0",
+    "tsparticles": "^3.0.2",
     "web-vitals": "^3.5.0"
   },
   "scripts": {

apps/react/src/App.js

@@ -5,16 +5,19 @@ import logo from "./logo.svg";
 import "./App.css";
 
 function App() {
-    const containerRef = useRef(null),
-        initParticlesCb = useCallback(async (engine) => {
-            await loadFull(engine);
-        }, []), [ init, setInit ] = useState(false);
+    const containerRef = useRef(null), [ init, setInit ] = useState(false);
 
     useEffect(() => {
-        initParticlesEngine(initParticlesCb).then(() => {
+        if (init) {
+            return;
+        }
+
+        initParticlesEngine(async (engine) => {
+            await loadFull(engine);
+        }).then(() => {
             setInit(true);
         });
-    }, [ initParticlesCb ]);
+    }, [ init ]);
 
     const particlesLoaded = useCallback(
             (container) => {
@@ -87,28 +90,12 @@ function App() {
             }),
             []
         ),
-        lightTheme = useCallback(() => {
-            if (!containerRef.current) {
-                return;
-            }
-
-            console.log(containerRef.current);
-
-            setTimeout(() => {
-                containerRef.current.loadTheme("light");
-            }, 500);
-        }, [ containerRef ]),
-        darkTheme = useCallback(() => {
-            if (!containerRef.current) {
-                return;
-            }
-
-            console.log(containerRef.current);
-
-            setTimeout(() => {
-                containerRef.current.loadTheme("dark");
-            }, 500);
-        }, [ containerRef ]);
+        lightTheme = () => {
+            containerRef.current?.loadTheme("light");
+        },
+        darkTheme = () => {
+            containerRef.current?.loadTheme("dark");
+        };
 
     return (
         <div className="App">
@@ -135,7 +122,7 @@ function App() {
             {init && (
                 <Particles
                     id="tsparticles"
-                    loaded={particlesLoaded}
+                    particlesLoaded={particlesLoaded}
                     options={options}
                 />
             )}