use react lazy & Suspense

package.json

@@ -10,12 +10,15 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "csv-parse": "^5.5.3",
-    "preact": "^10.19.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "csv-parse": "^5.5.3"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.7.0",
-    "prettier": "^3.1.1",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "prettier": "^3.2.2",
     "vite": "^5.0.8"
   }
 }

src/csv.jsx

@@ -1,5 +1,5 @@
 import { CsvError, parse } from "csv-parse/browser/esm";
-import { useCallback, useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "react";
 
 export default function CsvSplit() {
   const [input, setInput] = useState('"a","b","c"\n"1\n10","2","3"');

src/main.jsx

@@ -1,25 +1,30 @@
-import { render } from "preact";
-import { useState } from "preact/hooks";
-import CsvSplit from "./csv";
-import StringToUtf8CodePoint from "./utf";
+import { Suspense, lazy, render, useState } from "react";
 
-const layouts = new Map([
-  ["utf", (key) => <StringToUtf8CodePoint key={key} />],
-  ["csv", (key) => <CsvSplit key={key} />],
-]);
+const CsvSplit = lazy(() => import("./csv"));
+const StringToUtf8CodePoint = lazy(() => import("./utf"));
+
+const layouts = ["utf", "csv"];
 
 render(<App />, document.getElementById("app"));
 
 function App() {
-  const [layout, setLayout] = useState(layouts.keys().next()?.value);
+  const [layout, setLayout] = useState(layouts[0]);
   return (
     <>
       <select value={layout} onChange={(e) => setLayout(e.target.value)}>
-        {Array.from(layouts.keys()).map((key) => (
+        {layouts.map((key) => (
           <option value={key}>{key}</option>
         ))}
       </select>
-      {layouts.get(layout)(layout)}
+      <Suspense fallback={<div>Loading...</div>}>
+        {layout === "utf" ? (
+          <StringToUtf8CodePoint key="utf" />
+        ) : layout === "csv" ? (
+          <CsvSplit key="csv" />
+        ) : (
+          <div>Unknown</div>
+        )}
+      </Suspense>
     </>
   );
 }

src/utf.jsx

@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useState } from "react";
 export default function StringToUtf8CodePoint() {
   const [input, setInput] = useState("English(us)\n中文(简体）　\n🤣");
   return (