Memoize

src/components/Author.tsx

@@ -1,14 +1,14 @@
-import { FunctionComponent } from "react";
+import React from "react";
 
 type AuthorComponentProps = {
   authorId: string;
   authorNickname: string;
 };
 
-const AuthorComponent: FunctionComponent<AuthorComponentProps> = ({
+const AuthorComponent = React.memo(function Author({
   authorId,
   authorNickname,
-}) => {
+}: AuthorComponentProps) {
   return (
     <span
       className={
@@ -19,6 +19,6 @@ const AuthorComponent: FunctionComponent<AuthorComponentProps> = ({
       {authorNickname}
     </span>
   );
-};
+});
 
 export default AuthorComponent;

src/components/Connect.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { ReadyState as WebSocketReadyState } from "react-use-websocket";
 
 export type ConnectionOptions = {
@@ -11,7 +11,7 @@ export type ConnectComponentProps = {
   webSocketReadyState: WebSocketReadyState;
 };
 
-export default function Connect({
+const Connect = React.memo(function Connect({
   tryConnect,
   webSocketReadyState,
 }: ConnectComponentProps): JSX.Element {
@@ -56,4 +56,5 @@ export default function Connect({
       </button>
     </>
   );
-}
+});
+export default Connect;

src/components/UserBar.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ConnectedUser } from "src/lib/ServerMessage";
 
 export type UserBarProps = {
@@ -6,7 +7,7 @@ export type UserBarProps = {
   getName(id: string): string;
 };
 
-export default function UserBar({
+const UserBar = React.memo(function UserBar({
   connectedUsers,
   currentlyTyping,
   getName,
@@ -31,4 +32,6 @@ export default function UserBar({
       </ol>
     </section>
   );
-}
+});
+
+export default UserBar;

src/pages/index.tsx

@@ -213,17 +213,23 @@ export default function Index(): JSX.Element {
           <></>
         ) : (
           <>
-            Your ID: <span style={{ fontWeight: "bold" }}>{authorId}</span>
+            Your name:{" "}
+            <span title={authorId} style={{ fontWeight: "bold" }}>
+              {getName(authorId)}
+            </span>
           </>
-        )}{" "}
+        )}
+        <br />
         <Connect
           tryConnect={tryConnect}
           webSocketReadyState={webSocket.readyState}
         />
+        {/*
         <span>Ready state: </span>
         <span style={{ fontWeight: "bold" }}>
           {WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState})
         </span>
+        */}
       </header>
       <div id="container">
         <section id="message-area">