refactor: tidy

packages/react/src/components/stage/index.jsx

@@ -39,12 +39,25 @@ const Stage = ({
     /* eslint-enable no-param-reassign */
   }, [centered, renderable, scale, size]);
   useEffect(() => {
-    if (!ref.current || !renderable || !renderer) {
-      return undefined;
+    if (!renderer) {
+      return;
     }
     renderer.resize(size);
+  }, [renderer, size]);
+  useEffect(() => {
+    if (!ref.current || !renderer) {
+      return undefined;
+    }
     const canvasHost = ref.current;
     canvasHost.appendChild(renderer.element);
+    return () => {
+      canvasHost.removeChild(renderer.element);
+    };
+  }, [ref, renderer]);
+  useEffect(() => {
+    if (!renderable || !renderer) {
+      return undefined;
+    }
     let handle;
     const tick = (elapsed) => {
       ticker(elapsed);
@@ -53,14 +66,11 @@ const Stage = ({
     };
     tick(0);
     return () => {
-      if (renderer) {
-        canvasHost.removeChild(renderer.element);
-      }
       if (handle) {
         cancelAnimationFrame(handle);
       }
     };
-  }, [ref, renderable, renderer, size, ticker]);
+  }, [renderable, renderer, ticker]);
   return (
     <div className="stage">
       {scalable && (