add mounted boolean

Author: felixturner

src/App.js

@@ -2,13 +2,8 @@ import './App.css';
 import { ThreeWrapper } from './components/threeWrapper/ThreeWrapper';
 import { useControls } from 'leva';
 
-/*
-  This App.js conditionally adds/removes a ThreeWrapper component 
-  based on the threeLoaded state variable
-*/
-
-function MyComponent() {
-  const { speedX, speedY, scale } = useControls({
+function WrapperWithControls() {
+  const { speedX, speedY, scale, mounted } = useControls({
     speedX: {
       value: 0.15,
       min: 0,
@@ -27,16 +22,23 @@ function MyComponent() {
       max: 4,
       step: 0.1,
     },
+    mounted: true,
   });
   return (
-    <ThreeWrapper props={{ speedX: speedX, speedY: speedY, scale: scale }} />
+    <>
+      {mounted && (
+        <ThreeWrapper
+          props={{ speedX: speedX, speedY: speedY, scale: scale }}
+        />
+      )}
+    </>
   );
 }
 
 function App() {
   return (
     <div className="App">
-      <MyComponent />
+      <WrapperWithControls />
     </div>
   );
 }