Refactor EditorPage so switching Pattern doesn't cause rerender of en…

…tire page
paator · Aug 14, 2023 · efacd07 · efacd07
1 parent 02a9311
commit efacd07
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/src/components/EditorMenu/EditorButton.tsx b/src/components/EditorMenu/EditorButton.tsx
@@ -6,7 +6,7 @@ type ButtonProps = {
   children: React.ReactNode;
 };
 
-function Button({ onClick, children,  isDisabled, }: ButtonProps) {
+function Button({ onClick, children, isDisabled }: ButtonProps) {
   return (
     <button
       className="shadow-slate-900 drop-shadow-md bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded-lg font-mono text-sm"

diff --git a/src/pages/EditorPage.tsx b/src/pages/EditorPage.tsx
@@ -1,29 +1,26 @@
 import EditorButton from "../components/EditorMenu/EditorButton";
 import EditorMenu from "../components/EditorMenu/EditorMenu";
-import { useRef, ChangeEvent } from "react";
+import { useRef, ChangeEvent, useCallback } from "react";
 import Module from "../models/module";
 import VortexModuleConverter from "../services/vt-converter";
 import ModuleEditor from "../components/ModuleEditor/ModuleEditor";
 import { useBoundStore } from "../stores";
 
 function EditorPage() {
-  const { setModule, setPattern } = useBoundStore((state) => ({
-    setModule: state.setModule,
-    setPattern: state.setPattern,
-  }));
+  const setModule = useBoundStore((state) => state.setModule);
 
   const fileLoaderInput = useRef<HTMLInputElement>(null);
 
-  function newModule() {
+  const newModule = useCallback(() => {
     setModule(new Module());
-    setPattern(0);
-  }
+    useBoundStore.getState().setPattern(0);
+  }, [setModule]);
 
-  function loadModule() {
+  const loadModule = useCallback(() => {
     if (fileLoaderInput.current) {
       fileLoaderInput.current.click();
     }
-  }
+  }, [fileLoaderInput]);
 
   async function handleFileSelect(event: ChangeEvent<HTMLInputElement>) {
     if (!event.target.files) return;
@@ -36,7 +33,7 @@ function EditorPage() {
     );
 
     setModule(lemonModule);
-    setPattern(0);
+    useBoundStore.getState().setPattern(0);
   }
 
   return (