Implementing and verifying the integrity of the cleanup function on the core useEffect

js/Matrix.js

@@ -120,16 +120,9 @@ export const Matrix = memo((props) => {
 		);
 	};
 
-	useEffect(() => {
-		const useWebGPU = supportsWebGPU() && ["webgpu"].includes(rest.renderer?.toLowerCase());
-		const isWebGPU = rRenderer?.type === "webgpu";
-
-		if (rRenderer != null && useWebGPU === isWebGPU) {
-			return;
-		}
-
+	const cleanup = () => {
 		if (rCanvas != null) {
-			matrix.current.removeChild(rCanvas);
+			rCanvas.remove();
 			setCanvas(null);
 		}
 
@@ -141,6 +134,17 @@ export const Matrix = memo((props) => {
 		if (rRenderer != null) {
 			setRenderer(null);
 		}
+	};
+
+	useEffect(() => {
+		const useWebGPU = supportsWebGPU() && ["webgpu"].includes(rest.renderer?.toLowerCase());
+		const isWebGPU = rRenderer?.type === "webgpu";
+
+		if (rRenderer != null && useWebGPU === isWebGPU) {
+			return;
+		}
+
+		cleanup();
 
 		const canvas = document.createElement("canvas");
 		canvas.style.width = "100%";
@@ -155,6 +159,8 @@ export const Matrix = memo((props) => {
 			setRain(rain);
 		};
 		loadRain();
+
+		return cleanup;
 	}, [props.renderer]);
 
 	useEffect(() => {

js/index.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import { unmountComponentAtNode } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { Matrix } from "./Matrix";
 
@@ -23,6 +24,7 @@ const App = () => {
 	const [version, setVersion] = React.useState(versions[0]);
 	const [numColumns, setNumColumns] = React.useState(10);
 	const [rendererType, setRendererType] = React.useState(null);
+	const [destroyed, setDestroyed] = useState(false);
 	const onButtonClick = () => {
 		setVersion((s) => {
 			const newVersion = versions[idx];
@@ -39,19 +41,25 @@ const App = () => {
 	const onRendererButtonClick = () => {
 		setRendererType(() => (rendererType === "webgpu" ? "regl" : "webgpu"));
 	};
+	const onDestroyButtonClick = () => {
+		setDestroyed(true);
+	};
 
 	return (
 		<div>
 			<h1>Rain</h1>
 			<button onClick={onButtonClick}>Change properties</button>
 			<button onClick={onRendererButtonClick}>Renderer: {rendererType ?? "default (regl)"}</button>
-			<Matrix
-				style={{ width: "80vw", height: "45vh" }}
-				version={version}
-				numColumns={numColumns}
-				renderer={rendererType}
-				density={2.0}
-			/>
+			<button onClick={onDestroyButtonClick}>Destroy</button>
+			{!destroyed && (
+				<Matrix
+					style={{ width: "80vw", height: "45vh" }}
+					version={version}
+					numColumns={numColumns}
+					renderer={rendererType}
+					density={2.0}
+				/>
+			)}
 		</div>
 	);
 };