From 3cc4cf2593b40f71be90fd793cb5e13933aff2b3 Mon Sep 17 00:00:00 2001 From: Tobias Berger <14962962+Toby222@users.noreply.github.com> Date: Fri, 4 Feb 2022 11:55:18 +0000 Subject: [PATCH] Memoize --- src/components/Author.tsx | 8 ++++---- src/components/Connect.tsx | 7 ++++--- src/components/UserBar.tsx | 7 +++++-- src/pages/index.tsx | 10 ++++++++-- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/Author.tsx b/src/components/Author.tsx index 6e5e0d9..86fd39a 100644 --- a/src/components/Author.tsx +++ b/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 = ({ +const AuthorComponent = React.memo(function Author({ authorId, authorNickname, -}) => { +}: AuthorComponentProps) { return ( = ({ {authorNickname} ); -}; +}); export default AuthorComponent; diff --git a/src/components/Connect.tsx b/src/components/Connect.tsx index cde4b6e..01290ef 100644 --- a/src/components/Connect.tsx +++ b/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({ ); -} +}); +export default Connect; diff --git a/src/components/UserBar.tsx b/src/components/UserBar.tsx index df1524b..7b7afcf 100644 --- a/src/components/UserBar.tsx +++ b/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({ ); -} +}); + +export default UserBar; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5e96812..227df40 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -213,17 +213,23 @@ export default function Index(): JSX.Element { <> ) : ( <> - Your ID: {authorId} + Your name:{" "} + + {getName(authorId)} + - )}{" "} + )} +
+ {/* Ready state: {WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState}) + */}