perf(game-bottom-bar): memoize components to reduce rerenders

Author: KatoakDR

electron/renderer/components/game/game-bottom-bar.tsx

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
+import { memo } from 'react';
 import { GameCommandInput } from './game-command-input.jsx';
 import { GameCompass } from './game-compass.jsx';
 import { GameHands } from './game-hands.jsx';
 import { GameRoundTime } from './game-roundtime.jsx';
+import { GameStatusBars } from './game-status-bars.jsx';
 import { GameStatusIcons } from './game-status-icons.jsx';
 
-export const GameBottomBar: React.FC = (): ReactNode => {
+export const GameBottomBar: React.FC = memo((): ReactNode => {
   return (
     <div
       css={{
@@ -34,8 +36,9 @@ export const GameBottomBar: React.FC = (): ReactNode => {
         </div>
       </div>
       <GameCommandInput />
+      <GameStatusBars />
     </div>
   );
-};
+});
 
 GameBottomBar.displayName = 'GameBottomBar';

electron/renderer/components/game/game-command-input.tsx

@@ -3,9 +3,10 @@ import type {
   ChangeEvent,
   KeyboardEvent,
   KeyboardEventHandler,
+  ReactElement,
   ReactNode,
 } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { isEmpty } from '../../../common/string/string.utils.js';
 import { useCommandHistory } from '../../hooks/command-history.jsx';
 import { runInBackground } from '../../lib/async/run-in-background.js';
@@ -48,23 +49,41 @@ export const GameCommandInput: React.FC = (): ReactNode => {
     [handleOnChange]
   );
 
-  return (
-    <div css={{ width: '100%' }}>
-      <EuiFieldText
-        value={input}
-        compressed={true}
-        fullWidth={true}
-        autoFocus={true}
-        autoCorrect="off"
-        autoCapitalize="off"
-        autoComplete="off"
-        prepend={<EuiIcon type="arrowRight" size="s" color="primary" />}
-        tabIndex={0}
-        onKeyDown={onKeyDown}
-        onChange={onChange}
-      />
-    </div>
-  );
+  const commandIcon = useMemo((): ReactElement => {
+    return <EuiIcon type="arrowRight" size="s" color="primary" />;
+  }, []);
+
+  const commandInput = useMemo((): ReactElement => {
+    return (
+      <div
+        css={{
+          width: '100%',
+          paddingInline: '5px',
+        }}
+      >
+        <EuiFieldText
+          css={{
+            // Removes the bottom blue border when user focuses the field.
+            // I found it distracting.
+            backgroundImage: 'unset',
+          }}
+          value={input}
+          compressed={true}
+          fullWidth={true}
+          autoFocus={true}
+          autoCorrect="off"
+          autoCapitalize="off"
+          autoComplete="off"
+          prepend={commandIcon}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+        />
+      </div>
+    );
+  }, [input, commandIcon, onKeyDown, onChange]);
+
+  return commandInput;
 };
 
 GameCommandInput.displayName = 'GameCommandInput';