fix: optimize render updates

Author: stanley2058

src/App.tsx

@@ -8,7 +8,23 @@ import { useStore } from "zustand";
 import { displayOptionStore, yDocOptionStore } from "./lib/store";
 
 export default function App() {
-  const { apiVersion, inputBuffer } = useStore(yDocOptionStore);
+  return (
+    <div className="flex h-screen bg-gray-900 text-white">
+      <Sidebar />
+      <main className="flex-1 flex flex-col p-4">
+        <InputContainer />
+        <div className="flex-1 gap-4 grid grid-cols-2 overflow-auto bg-gray-800 rounded-lg p-4 [&>div]:px-4 [&>div]:py-2">
+          <MainViewer />
+          <SideViewer />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function InputContainer() {
+  const apiVersion = useStore(yDocOptionStore, (s) => s.apiVersion);
+  const inputBuffer = useStore(yDocOptionStore, (s) => s.inputBuffer);
 
   useEffect(() => {
     const prev = displayOptionStore.getState().display;
@@ -34,24 +50,15 @@ export default function App() {
   }, [inputBuffer, apiVersion]);
 
   return (
-    <div className="flex h-screen bg-gray-900 text-white">
-      <Sidebar />
-      <main className="flex-1 flex flex-col p-4">
-        <Input
-          type="text"
-          placeholder="Enter HEX state here"
-          value={inputBuffer}
-          onChange={(e) =>
-            yDocOptionStore.setState({ inputBuffer: e.target.value })
-          }
-          className="mb-4 bg-gray-800 text-white border-gray-700"
-        />
-        <div className="flex-1 gap-4 grid grid-cols-2 overflow-auto bg-gray-800 rounded-lg p-4 [&>div]:px-4 [&>div]:py-2">
-          <MainViewer />
-          <SideViewer />
-        </div>
-      </main>
-    </div>
+    <Input
+      type="text"
+      placeholder="Enter HEX state here"
+      value={inputBuffer}
+      onChange={(e) =>
+        yDocOptionStore.setState({ inputBuffer: e.target.value })
+      }
+      className="mb-4 bg-gray-800 text-white border-gray-700"
+    />
   );
 }
 

src/components/sidebar.tsx

@@ -21,7 +21,8 @@ export function Sidebar() {
 }
 
 function YDocOptions() {
-  const { apiVersion, getApiType } = useStore(yDocOptionStore);
+  const apiVersion = useStore(yDocOptionStore, (s) => s.apiVersion);
+  const getApiType = useStore(yDocOptionStore, (s) => s.getApiType);
   return (
     <>
       <h3 className="text-lg font-semibold mt-2">Y.Doc Options</h3>
@@ -85,8 +86,17 @@ function YDocOptions() {
 }
 
 function DisplayOptions() {
-  const { indentWidth, enableClipboard, displayDataTypes, displaySize } =
-    useStore(displayOptionStore);
+  const indentWidth = useStore(displayOptionStore, (s) => s.indentWidth);
+  const enableClipboard = useStore(
+    displayOptionStore,
+    (s) => s.enableClipboard,
+  );
+  const displayDataTypes = useStore(
+    displayOptionStore,
+    (s) => s.displayDataTypes,
+  );
+  const displaySize = useStore(displayOptionStore, (s) => s.displaySize);
+
   return (
     <>
       <h3 className="text-lg font-semibold mt-2">Display Options</h3>