Memoize components and functions

derarion · Dec 31, 2023 · 99fd4c2 · 99fd4c2
1 parent 4748450
commit 99fd4c2
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 98 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
   Box,
@@ -37,33 +37,36 @@ function App() {
   );
   const isHorizontalLayout = userLayout === "horizontal" || isMuiMdScreen;
 
-  const handleRunClick = () => {
+  const handleRunClick = useCallback(() => {
     setStdout([]);
     setStderr([]);
     momonga_run(srcRef.current); // NOTE: In order to run on Worker, it is necessary to change the way of passing its output data to main thread.
-  };
+  }, []);
 
-  const handleSrcChange = (src: string) => {
+  const handleSrcChange = useCallback((src: string) => {
     srcRef.current = src;
 
     if (!isWasmIntitializedRef.current) return;
     setIsParseError(is_momonga_parse_error(src));
-  };
+  }, []);
 
-  const handleLayoutClick = () => {
+  const handleLayoutClick = useCallback(() => {
     setUserLayout((prev) =>
       prev === "horizontal" ? "vertical" : "horizontal",
     );
-  };
+  }, []);
 
-  const handleSnippetChange = (event: SelectChangeEvent<string>) => {
-    const snippet = snippets.find(
-      (snippet) => snippet.key === event.target.value,
-    );
-    if (snippet) {
-      setSnippetKey(snippet.key);
-    }
-  };
+  const handleSnippetChange = useCallback(
+    (event: SelectChangeEvent<string>) => {
+      const snippet = snippets.find(
+        (snippet) => snippet.key === event.target.value,
+      );
+      if (snippet) {
+        setSnippetKey(snippet.key);
+      }
+    },
+    [],
+  );
 
   useEffect(() => {
     (async () => {

diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import { MutableRefObject, memo, useEffect, useRef, useState } from "react";
 
 import { Box } from "@mui/material";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
@@ -103,7 +103,7 @@ type Props = {
   onSrcChange: (src: string) => void;
 };
 
-export const Editor = React.memo(
+export const Editor = memo(
   ({ isParseError, srcRef, snippetKey, onSrcChange }: Props) => {
     const [editor, setEditor] =
       useState<monaco.editor.IStandaloneCodeEditor | null>(null);

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { memo, useContext } from "react";
 
 import {
   AppBar,
@@ -29,83 +29,85 @@ type Props = {
   onMainLayoutClick: () => void;
 };
 
-export const Header = ({
-  isMuiMdScreen,
-  isHorizontalLayout,
-  snippetKey,
-  onMainLayoutClick,
-  onRunClick,
-  onSnippetChange,
-}: Props) => {
-  const { mode, toggleMode } = useContext<UserConfig>(ThemeContext);
-  return (
-    <AppBar
-      position="static"
-      sx={{ padding: "0.5rem", boxShadow: "none" }}
-      color="default"
-    >
-      <Toolbar variant="dense">
-        <Box
-          sx={{
-            marginRight: "auto",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "1rem",
-          }}
-        >
-          <Button onClick={onRunClick} variant="contained">
-            Run
-          </Button>
-          <FormControl>
-            <InputLabel id="code-snippets-select-label">
-              Code Snippets
-            </InputLabel>
-            <Select
-              labelId="code-snippets-select-label"
-              id="code-snippets-select"
-              label="Code Snippets"
-              value={snippetKey}
-              onChange={onSnippetChange}
-              autoWidth
-            >
-              {snippets.map((snippet) => (
-                <MenuItem key={snippet.key} value={snippet.key}>
-                  {snippet.label}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </Box>
-        <Box
-          sx={{
-            marginLeft: "auto",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-          }}
-        >
-          <Button
-            startIcon={<IoMdDocument />}
-            color="inherit"
-            sx={{ borderRight: 0 }}
+export const Header = memo(
+  ({
+    isMuiMdScreen,
+    isHorizontalLayout,
+    snippetKey,
+    onMainLayoutClick,
+    onRunClick,
+    onSnippetChange,
+  }: Props) => {
+    const { mode, toggleMode } = useContext<UserConfig>(ThemeContext);
+    return (
+      <AppBar
+        position="static"
+        sx={{ padding: "0.5rem", boxShadow: "none" }}
+        color="default"
+      >
+        <Toolbar variant="dense">
+          <Box
+            sx={{
+              marginRight: "auto",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: "1rem",
+            }}
+          >
+            <Button onClick={onRunClick} variant="contained">
+              Run
+            </Button>
+            <FormControl>
+              <InputLabel id="code-snippets-select-label">
+                Code Snippets
+              </InputLabel>
+              <Select
+                labelId="code-snippets-select-label"
+                id="code-snippets-select"
+                label="Code Snippets"
+                value={snippetKey}
+                onChange={onSnippetChange}
+                autoWidth
+              >
+                {snippets.map((snippet) => (
+                  <MenuItem key={snippet.key} value={snippet.key}>
+                    {snippet.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+          <Box
+            sx={{
+              marginLeft: "auto",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+            }}
           >
-            Grammar
-          </Button>
-          {!isMuiMdScreen && (
-            <IconButton onClick={onMainLayoutClick}>
-              {isHorizontalLayout ? (
-                <VscLayoutPanelOff />
-              ) : (
-                <VscLayoutSidebarRightOff />
-              )}
+            <Button
+              startIcon={<IoMdDocument />}
+              color="inherit"
+              sx={{ borderRight: 0 }}
+            >
+              Grammar
+            </Button>
+            {!isMuiMdScreen && (
+              <IconButton onClick={onMainLayoutClick}>
+                {isHorizontalLayout ? (
+                  <VscLayoutPanelOff />
+                ) : (
+                  <VscLayoutSidebarRightOff />
+                )}
+              </IconButton>
+            )}
+            <IconButton onClick={toggleMode}>
+              {mode === "light" ? <MdLightMode /> : <MdDarkMode />}
             </IconButton>
-          )}
-          <IconButton onClick={toggleMode}>
-            {mode === "light" ? <MdLightMode /> : <MdDarkMode />}
-          </IconButton>
-        </Box>
-      </Toolbar>
-    </AppBar>
-  );
-};
+          </Box>
+        </Toolbar>
+      </AppBar>
+    );
+  },
+);
diff --git a/src/components/Output.tsx b/src/components/Output.tsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 import { Box, Divider } from "@mui/material";
 
 import { Stderr, Stdout } from "@/types/types";
@@ -7,7 +9,7 @@ type Props = {
   stderr: Stderr;
 };
 
-export const Output = ({ stdout, stderr }: Props) => {
+export const Output = memo(({ stdout, stderr }: Props) => {
   return (
     <Box
       sx={{
@@ -31,4 +33,4 @@ export const Output = ({ stdout, stderr }: Props) => {
       </Box>
     </Box>
   );
-};
+});